Output | Webpack

최상위 output 키에는 번들, 애셋 및 webpack으로 번들링하거나 로드하는 기타 항목을 출력하는 방법과 위치를 webpack에 지시하는 옵션이 포함되어 있습니다.
string = '[hash][ext][query][fragment]' (pathData: PathData, assetInfo?: AssetInfo) => string
output.filename과 동일하지만 애셋 모듈용입니다.
데이터 URI 모듈로부터 빌드된 애셋의 경우 [file], [query], [fragment], [path]는 빈 문자열로 설정되고, [name]과 [base]는 콘텐츠 해시로 해석되며, [ext]는 MIME 타입에서 파생됩니다.
요청 시 로드되는 비동기 청크를 생성합니다.
output.library.auxiliaryComment를 사용하는 것이 좋습니다.
output.library 및 output.libraryTarget과 함께 사용되는 경우, 사용자가 export 래퍼 내에 주석을 삽입할 수 있습니다. 각 libraryTarget 타입에 동일한 주석을 삽입하려면 auxiliaryComment를 문자열로 설정하세요.
각 libraryTarget 주석을 세밀하게 제어하려면 객체로 설정하세요.
webpack이 HTML의 <script> 태그에 charset="utf-8"을 추가하도록 합니다.
<script>태그의 charset속성이 지원 중단된 상태지만 최신이 아닌 브라우저와의 호환성을 위해 webpack은 여전히 charset을 기본적으로 추가합니다.
string = '[id].js' (pathData: PathData, assetInfo?: AssetInfo) => string
이 옵션은 초기가 아닌 청크 파일의 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.
청크 파일 요청을 위해 런타임에서 파일 이름을 생성해야 합니다. 이 때문에 [name] 및 [chunkhash]와 같은 자리 표시자는 webpack 런타임을 사용하여 청크 ID에서 자리 표시자 값으로의 매핑을 출력 번들에 추가해야 합니다. 이렇게하면 크기가 증가하고 청크의 자리 표시자 값이 변경 될 때 번들이 무효화 될 수 있습니다.
webpack 5.111.0부터, 네이티브 import()를 통해 청크를 로드하는 output.module 빌드는 청크 로더가 보유한 리터럴 지정자로 각 청크를 명명하므로, 번들러나 프리로드 스캐너가 webpack 런타임을 실행하지 않고도 따라갈 수 있습니다. 이 이름들은 런타임을 포함하는 청크에 저장되므로, 지연 로드된 청크를 변경하면 해당 청크만 무효화되고 이를 import하는 모든 모듈은 무효화되지 않습니다. webpack 5.110은 각 import 사이트에 지정자를 작성했으며, 이로 인해 import된 청크의 [contenthash]가 import하는 모듈에 포함되었습니다.
기본적으로 이 값은 output.filename에서 유추됩니다. [name], [id], [chunkhash] 또는 [contenthash]를 포함하는 경우 그대로 사용되고, 그렇지 않으면 기본 이름 앞에 [id].가 추가됩니다(bundle.js는 [id].bundle.js가 됨). output.filename이 함수인 경우 [id].js(또는 output.module과 함께 [id].mjs)가 사용됩니다.
output.filename이 [name], [id], [contenthash], 또는 [chunkhash]와 같은 플레이스홀더를 포함하는 문자열로 정의된 경우 output.chunkFilename의 기본값은 output.filename에서 파생됩니다. 그렇지 않으면 [id].js가 기본값으로 사용됩니다.
false 'array-push' | 'commonjs' | 'module' | string
청크의 포맷 (기본적으로 포함되는 포맷은 'array-push' (web/WebWorker), 'commonjs' (node.js), 'module' (ESM) 등이지만 플러그인에 의해 추가될 수 있습니다).
이 옵션의 기본값은 target 과 output.module 설정에 따라 달라집니다. 더 자세한 내용은 webpack의 기본값에서 "chunkFormat" 을 검색하세요.
청크 요청이 만료되기까지의 밀리 초 단위의 시간입니다. 이 옵션은 webpack 2.6.0부터 지원됩니다.
output.chunkFormat가 'array-push'일 때(기본적으로 web 및 webworker 타겟) webpack이 청크를 로드하기 위해 사용하는 전역 배열의 이름입니다. 기본 이름은 'webpackChunk' 뒤에 output.uniqueName이 붙으며, JavaScript 식별자에 유효하지 않은 모든 문자는 _로 대체됩니다. 배열은 output.globalObject에 있으므로 my-app 패키지의 브라우저 빌드에서는 self['webpackChunkmy_app']입니다.
모든 청크 파일은 자신의 모듈을 해당 배열에 push하며, 초기 청크에 포함된 런타임은 배열의 push 메서드를 자체 콜백으로 교체합니다. 이를 통해 런타임 이전에 로드된 청크와 이후에 도착하는 청크 모두 설치되어, 비동기 청크 로딩이 고정된 로딩 순서 없이 작동합니다.
이 옵션은 webpack 4의 output.jsonpFunction을 대체합니다. webpack 5에 jsonpFunction을 전달하면 output.chunkLoadingGlobal을 가리키는 메시지와 함께 유효성 검사에 실패합니다.
동일한 chunkLoadingGlobal을 공유하는 하나의 문서에 로드된 두 빌드는 서로의 배열에 청크를 push하여 일반적으로 Uncaught TypeError: __webpack_modules__[moduleId] is not a function과 같은 런타임 오류가 발생합니다.
webpack 5는 output.uniqueName에서 기본값을 파생시켜 이를 방지하며, output.uniqueName은 package.json의 name을 기본값으로 사용합니다. 따라서 동일한 패키지 이름으로 빌드된 호스트 애플리케이션과 리모트, 또는 같은 설정으로 두 번 빌드된 라이브러리처럼 페이지의 여러 빌드가 동일한 고유 이름을 가지게 될 경우에만 이 옵션을 설정하면 됩니다.
output.uniqueName 설정을 권장합니다. chunkLoadingGlobal과 달리 output.hotUpdateGlobal 및 output.devtoolNamespace도 구분해줍니다.
false 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | string
청크를 로드하는 메서드입니다(기본적으로 포함된 메서드는 'jsonp' (web), 'import' (ESM), 'import-scripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js)이지만 플러그인에 의해 추가될 수 있습니다).
이 옵션의 기본 값은 target과 chunkFormat 설정에 따라 달라집니다. 더 자세한 내용은 webpack의 기본값에서 "chunkLoading" 을 검색하세요.
boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }
hook과 함께 사용할 수도 있습니다.
출력 파일 시스템에 쓰기 전에 내보낼 파일이 이미 존재하고 동일한 내용이 있는지 확인하도록 webpack에 지시합니다.
동일한 내용의 파일이 디스크에 이미 있는 경우 webpack은 출력 파일을 만들지 않습니다.
string (string | object)[]
빌드의 일부로 파일과 디렉터리를 output.path에 복사합니다. 복사된 파일은 다른 애셋과 마찬가지로 애셋이 되어, output.clean이 유지하고 stats에 보고되며, watch 모드에서 소스 파일을 편집하면 나머지를 재빌드하지 않고 다시 복사됩니다.
문자열은 단일 패턴의 from에 대한 단축 표기입니다. 문자열과 패턴 객체를 혼합하여 여러 위치에서 복사하려면 배열을 전달하세요.
복사된 모든 애셋은 asset info에 copied: true와 복사된 원본 파일명 sourceFilename을 포함하므로, 이후 플러그인이 복사된 애셋과 생성된 애셋을 구별할 수 있습니다.
아무것도 일치하지 않는 패턴은 경고를 발생시키고, 컴파일이 직접 출력하는 애셋 위에 파일을 복사하는 것은 오류입니다. filename 또는 to로 복사본에 다른 이름을 지정하세요. 하나의 output.copy 내에서 나중 패턴은 이전 패턴이 작성한 것을 의도적으로 덮어쓸 수 있습니다.
패턴은 from과 아래의 옵션으로 구성됩니다.
context는 기본적으로 컴파일러 context이며, from이 glob이 아닐 때는 from이 지정하는 것으로 설정됩니다. 따라서 from: 'static'은 static/ 디렉터리가 아닌 static/ 아래의 트리를 복사합니다. 명시적으로 설정하면 패턴의 모든 from을 하나의 디렉터리에 뿌리를 두게 하며, 여러 glob이 공유 구조를 유지하는 방법입니다.