https://webpack.kr/7470.c044c4a608cda01d.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[7470],{5089:function(n,s,e){e.r(s),e.d(s,{default:function(){return l}});var a=e(2540),c=e(9710);function t(n){const s={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",span:"span",...(0,c.R)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.p,{children:"생성된 각 청크의 상단에 배너를 추가합니다."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-js",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," webpack ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"webpack"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"banner",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(s.span,{className:"token comment",children:"// 또는"}),"\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"options",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"options"}),"Options",(0,a.jsx)(s.a,{href:"#options","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-ts",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  banner",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"string"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"function"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// 배너를 문자열 또는 함수로 사용하면, 주석으로 감싸집니다."}),"\n  raw",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"boolean"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// true이면, 배너가 주석에 감싸지지 않습니다."}),"\n  entryOnly",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"boolean"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// true이면, 배너는 엔트리 청크에만 추가됩니다."}),"\n  test",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"string"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," RegExp ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"["}),(0,a.jsx)(s.span,{className:"token builtin",children:"string"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," RegExp",(0,a.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// 테스트를 통과하는 모든 모듈이 포함됩니다."}),"\n  include",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"string"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," RegExp ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"["}),(0,a.jsx)(s.span,{className:"token builtin",children:"string"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," RegExp",(0,a.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// 다음 ì¡°ê±´ 중 하나라도 일치하는 모든 모듈이 포함됩니다."}),"\n  exclude",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"string"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," RegExp ",(0,a.jsx)(s.span,{className:"token operator",children:"|"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"["}),(0,a.jsx)(s.span,{className:"token builtin",children:"string"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," RegExp",(0,a.jsx)(s.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// 다음 ì¡°ê±´ 중 하나라도 일치하는 모든 모듈이 제ì

1™¸ë©ë‹ˆë‹¤."}),"\n  footer",(0,a.jsx)(s.span,{className:"token operator",children:"?"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"boolean"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// true이면, 배너는 컴파일이 끝날 때 배치됩니다."}),"\n  stage",(0,a.jsx)(s.span,{className:"token operator",children:"?"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token builtin",children:"number"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(s.span,{className:"token comment",children:"// 배너를 주입해야 하는 컴파일 단계"}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"usage"}),"Usage",(0,a.jsx)(s.a,{href:"#usage","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-js",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," webpack ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"webpack"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token comment",children:"// 문자열"}),"\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"banner"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"hello world"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token comment",children:"// 함수"}),"\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token function-variable function",children:"banner"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token parameter",children:"yourVariable"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"=>"})," ",(0,a.jsxs)(s.span,{className:"token template-string",children:[(0,a.jsx)(s.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(s.span,{className:"token string",children:"yourVariable: "}),(0,a.jsxs)(s.span,{className:"token interpolation",children:[(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"yourVariable",(0,a.jsx)(s.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token comment",children:"// 최소화 및 애셋 조작 후 배너 메시지를 추가합니다."}),"\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"raw"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token boolean",children:"true"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"banner"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"/* 배너는 문자열입니다 */"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"stage"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"Compilation",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token constant",children:"PROCESS_ASSETS_STAGE_REPORT"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"placeholders"}),"Placeholders",(0,a.jsx)(s.a,{href:"#placeholders","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsxs)(s.p,{children:["webpack 2.5.0 부터, placeholder는 ",(0,a.jsx)(s.code,{children:"배너"})," 문자열로 평가됩니다."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-js",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," webpack ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"webpack"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"new"})," ",(0,a.jsxs)(s.span,{className:"token class-name",children:["webpack",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),"BannerPlugin"]}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"banner"}),(0,a.jsx)(s.span,{className:"token operator",children:":"}),"\n    ",(0,a.jsx)(s.span,{className:"token string",children:'"fullhash:[fullhash], chunkhash:[chunkhash], name:[name], filebase:[filebase], query:[query], file:[file]"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})})]})}function l(n={}){const{wrapper:s}={...(0,c.R)(),...n.components};return s?(0,a.jsx)(s,{...n,children:(0,a.jsx)(t,{...n})}):t(n)}}}]);