https://webpack.kr/2352.696e24602f5a5e50.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[2352],{2352:function(n,s,e){e.r(s),e.d(s,{default:function(){return t}});var a=e(2540),c=e(9710);function l(n){const s={a:"a",blockquote:"blockquote",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,c.R)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.blockquote,{children:["\n",(0,a.jsx)(s.p,{children:"이 섹션은 webpack의 내부 요소를 설명하며 플러그인 개발자에게 유용할 수 있습니다."}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:"번들링은 일부 파일을 가져오고 다른 파일은 내보내는 기능입니다."}),"\n",(0,a.jsxs)(s.p,{children:["그러나 입력과 출력 사이에는 ",(0,a.jsx)(s.a,{href:"/concepts/modules/",children:"모듈"}),", ",(0,a.jsx)(s.a,{href:"/concepts/entry-points/",children:"엔트리 포인트"}),", 청크, 청크 그룹, 그 외 많은 중간 요소들이 있습니다."]}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"the-main-parts"}),"The main parts",(0,a.jsx)(s.a,{href:"#the-main-parts","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsxs)(s.p,{children:["프로젝트에서 사용하는 모든 파일은 ",(0,a.jsx)(s.a,{href:"/concepts/modules/",children:"모듈"}),"입니다."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"./index.js"})}),"\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"})," app ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"./app.js"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"./app.js"})}),"\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:"export"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"the app"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})}),"\n",(0,a.jsxs)(s.p,{children:["모듈은 서로를 사용하여 그래프(",(0,a.jsx)(s.code,{children:"ModuleGraph"}),")를 형성합니다."]}),"\n",(0,a.jsxs)(s.p,{children:["번들링 과정 중에 모듈은 청크로 결합됩니다.\n청크는 청크 그룹으로 합쳐지고, 모듈을 통해 서로 연결된 그래프(",(0,a.jsx)(s.code,{children:"ChunkGraph"}),")를 형성합니다.\n내부적으로 엔트리 포인트를 설명할 때는 하나의 청크로 청크 그룹을 만드는 것을 말합니다."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"./webpack.config.js"})}),"\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:"export"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"entry"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"./index.js"'}),(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:";"})]})}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"main"}),"이라는 이름으로 하나의 청크 그룹이 생성됩니다. (",(0,a.jsx)(s.code,{children:"main"}),"은 엔트리 포인트의 기본 이름입니다.)\n이 청크 그룹에는",(0,a.jsx)(s.code,{children:"./index.js"})," 모듈이 포함되어 있습니다. 파서가 ",(0,a.jsx)(s.code,{children:"./index.js"})," 내부의 import 문을 처리하면서 새 모듈이 이 청크에 추가됩니다."]}),"\n",(0,a.jsx)(s.p,{children:"다른 예제를 확인해보세요."}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"./webpack.config.js"})}),"\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:"export"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"entry"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"home"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"./home.js"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"about"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"./about.js"'}),(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:","}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"})]})}),"\n",(0,a.jsxs)(s.p,{children:["이름이 ",(0,a.jsx)(s.code,{children:"home"}),"과 ",(0,a.jsx)(s.code,{children:"about"}),"인 두 개의 청크 그룹이 생성됩니다.\n각각의 청크 그룹은 모듈이 있는 청크를 가지고 있습니다. ",(0,a.jsx)(s.code,{children:"home"})," 은 ",(0,a.jsx)(s.code,{children:"./home.js"}),"를, ",(0,a.jsx)(s.code,{children:"about"})," 은 ",(0,a.jsx)(s.code,{children:"./about.js"})," 청크를 가지고 있습니다."]}),"\n",(0,a.jsxs)(s.blockquote,{children:["\n",(0,a.jsxs)(s.p,{children:["청크 그룹에는 하나 이상의 청크가 있을 수 있습니다. 예를 들어 ",(0,a.jsx)(s.a,{href:"/plugins/split-chunks-plugin/",children:"SplitChunksPlugin"}),"은 청크를 하나 또는 그 이상의 청크로 분할합니다."]}),"\n"]}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"chunks"}),"Chunks",(0,a.jsx)(s.a,{href:"#chunks","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsx)(s.p,{children:"청크는 두 가지 형태로 제공됩니다."}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"초기 청크"}),"는 엔트리 포인트의 메인 청크입니다. 이 청크는 엔트리 포인트에서 명시된 모든 모듈과 의존성을 포함합니다."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"비초기 청크"}),"는 지연 로드될 수 있는 청크입니다. ",(0,a.jsx)(s.a,{href:"/guides/code-splitting/#dynamic-imports",children:"동적 import"})," 또는 ",(0,a.jsx)(s.a,{href:"/plugins/split-chunks-plugin/",children:"SplitChunksPlugin"})," 사용 중에 나타날 수 있습니다."]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["각 청크에는 해당하는 ",(0,a.jsx)(s.strong,{children:"애셋이"})," 있습니다. 애셋은 번들링의 결과로 출력된 파일입니다."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"webpack.config.js"})}),"\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:"export"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token literal-property property",children:"entry"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"./src/index.jsx"'}),(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:";"})]})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"./src/index.jsx"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," createRoot ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:'"react-dom/client"'}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"import"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:'"./app.jsx"'}),(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 function",children:"then"}),(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 parameter",children:"App"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," root ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token function",children:"createRoot"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"document",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token function",children:"getElementById"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:'"root"'}),(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  root",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token function",children:"render"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"App"})]})," ",(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.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.p,{children:["이름이 ",(0,a.jsx)(s.code,{children:"main"}),"인 초기 청크가 생성되며, 이 청크는 다음을 포함합니다."]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.code,{children:"./src/index.jsx"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.code,{children:"react"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.code,{children:"react-dom"})}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["그리고 ",(0,a.jsx)(s.code,{children:"./app.jsx"})," 를 제외한 모든 의존성도 포함합니다."]}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"./app.jsx"}

1)," 모듈은 동적으로 가져오므로 비초기 청크가 생성됩니다."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"결과:"})}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"/dist/main.js"})," - ",(0,a.jsx)(s.code,{children:"초기"})," 청크"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"/dist/394.js"})," - ",(0,a.jsx)(s.code,{children:"비초기"})," 청크"]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["기본적으로 ",(0,a.jsx)(s.code,{children:"비초기"})," 청크에는 이름이 없으므로 이름 대신 고유한 ID가 사용됩니다.\n동적으로 가져올 때 ",(0,a.jsx)(s.a,{href:"/api/module-methods/#magic-comments",children:'"특별한" 주석'}),"을 사용하여 청크 이름을 구체적으로 지정할 수 있습니다."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"\n  ",(0,a.jsx)(s.span,{className:"token comment",children:'/* webpackChunkName: "app" */'}),"\n  ",(0,a.jsx)(s.span,{className:"token string",children:'"./app.jsx"'}),"\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 function",children:"then"}),(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 parameter",children:"App"}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," root ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token function",children:"createRoot"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"document",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token function",children:"getElementById"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token string",children:'"root"'}),(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  root",(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token function",children:"render"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"App"})]})," ",(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.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.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"결과:"})}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"/dist/main.js"})," - ",(0,a.jsx)(s.code,{children:"초기"})," 청크"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"/dist/app.js"})," - ",(0,a.jsx)(s.code,{children:"비초기"})," 청크"]}),"\n"]}),"\n",(0,a.jsxs)(s.h2,{children:[(0,a.jsx)(s.span,{id:"output"}),"Output",(0,a.jsx)(s.a,{href:"#output","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(s.span,{className:"header-link"})})]}),"\n",(0,a.jsx)(s.p,{children:"출력 파일의 이름은 설정의 두 필드에 영향을 받습니다."}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"/configuration/output/#outputfilename",children:(0,a.jsx)(s.code,{children:"output.f

1ilename"})})," - ",(0,a.jsx)(s.code,{children:"초기"})," 청크 파일에서 사용합니다."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.a,{href:"/configuration/output/#outputchunkfilename",children:(0,a.jsx)(s.code,{children:"output.chunkFilename"})})," - ",(0,a.jsx)(s.code,{children:"비초기"})," 청크 파일에서 사용합니다."]}),"\n",(0,a.jsxs)(s.li,{children:["경우에 따라서 청크를 ",(0,a.jsx)(s.code,{children:"초기"}),"와 ",(0,a.jsx)(s.code,{children:"비초기"}),"로 사용합니다. 이 때는 ",(0,a.jsx)(s.code,{children:"output.filename"}),"을 사용합니다."]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["이 필드에는 ",(0,a.jsx)(s.a,{href:"/configuration/output/#template-strings",children:"몇 개의 플레이스 홀더"}),"를 제공합니다. 가장 자주 사용하는 것은 아래와 같습니다."]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"[id]"})," - 청크 ID (예: ",(0,a.jsx)(s.code,{children:"[id].js"})," -> ",(0,a.jsx)(s.code,{children:"485.js"}),")"]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"[name]"})," - 청크 이름 (예: ",(0,a.jsx)(s.code,{children:"[name].js"})," -> ",(0,a.jsx)(s.code,{children:"app.js"}),"). 청크에 이름이 없는 경우 ID가 사용됩니다."]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"[contenthash]"})," - 출력 파일 콘텐츠의 md4-hash (예: ",(0,a.jsx)(s.code,{children:"[contenthash].js"})," -> ",(0,a.jsx)(s.code,{children:"4ea6ff1de66c537eb9b2.js"}),")"]}),"\n"]})]})}function t(n={}){const{wrapper:s}={...(0,c.R)(),...n.components};return s?(0,a.jsx)(s,{...n,children:(0,a.jsx)(l,{...n})}):l(n)}}}]);