Datagrid and Charting for Enterprise Applications

Output

최상위 output 키에는 번들, 애셋 및 webpack으로 번들링하거나 로드하는 기타 항목을 출력하는 방법과 위치를 webpack에 지시하는 옵션이 포함되어 있습니다.

output.assetModuleFilename

string = '[hash][ext][query]' function (pathData, assetInfo) => string

output.filename과 동일하지만 애셋 모듈용입니다.

[name], [file], [query], [fragment], [base], [path]는 데이터 URI 대체로 빌드된 애셋에 대해 빈 문자열로 설정됩니다.

output.asyncChunks

boolean = true

요청 시 로드되는 비동기 청크를 생성합니다.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    asyncChunks: true,
  },
};

output.auxiliaryComment

string object

output.library 및 output.libraryTarget과 함께 사용되는 경우, 사용자가 export 래퍼 내에 주석을 삽입할 수 있습니다. 각 libraryTarget 타입에 동일한 주석을 삽입하려면 auxiliaryComment를 문자열로 설정하세요.

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'someLibName',
    libraryTarget: 'umd',
    filename: 'someLibName.js',
    auxiliaryComment: 'Test Comment',
  },
};

그러면 다음과 같이 생성됩니다.

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require('lodash'));
  // Test Comment
  else if (typeof define === 'function' && define.amd)
    define(['lodash'], factory);
  // Test Comment
  else if (typeof exports === 'object')
    exports['someLibName'] = factory(require('lodash'));
  // Test Comment
  else root['someLibName'] = factory(root['_']);
})(this, function (__WEBPACK_EXTERNAL_MODULE_1__) {
  // ...
});

각 libraryTarget 주석을 세밀하게 제어하려면 객체로 설정하세요.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    auxiliaryComment: {
      root: 'Root Comment',
      commonjs: 'CommonJS Comment',
      commonjs2: 'CommonJS2 Comment',
      amd: 'AMD Comment',
    },
  },
};

output.charset

boolean = true

webpack이 HTML의 <script> 태그에 charset="utf-8"을 추가하도록 합니다.

output.chunkFilename

string = '[id].js' function (pathData, assetInfo) => string

이 옵션은 초기가 아닌 청크 파일의 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

청크 파일 요청을 위해 런타임에서 파일 이름을 생성해야 합니다. 이 때문에 [name] 및 [chunkhash]와 같은 자리 표시자는 webpack 런타임을 사용하여 청크 ID에서 자리 표시자 값으로의 매핑을 출력 번들에 추가해야 합니다. 이렇게하면 크기가 증가하고 청크의 자리 표시자 값이 변경 될 때 번들이 무효화 될 수 있습니다.

기본적으로 [id].js가 사용되거나 output.filename에서 유추 된 값이 사용됩니다([name]이 [id]로 대체되거나 [id].가 추가).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js',
  },
};

함수로 사용할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    chunkFilename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

output.chunkFormat

false string: 'array-push' | 'commonjs' | 'module' | <any string>

청크의 포맷 (기본적으로 포함되는 포맷은 'array-push' (web/WebWorker), 'commonjs' (node.js), 'module' (ESM) 등이지만 플러그인에 의해 추가될 수 있습니다).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFormat: 'commonjs',
  },
};

output.chunkLoadTimeout

number = 120000

청크 요청이 만료되기까지의 밀리 초 단위의 시간입니다. 이 옵션은 webpack 2.6.0부터 지원됩니다.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadTimeout: 30000,
  },
};

output.chunkLoadingGlobal

string = 'webpackChunkwebpack'

webpack에서 청크를 로드하기 위해 사용하는 전역 변수입니다.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadingGlobal: 'myCustomFunc',
  },
};

output.chunkLoading

청크를 로드하는 메소드(기본적으로 포함된 메소드는 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js) 등이지만 플러그인에 의해 추가될 수 있습니다).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoading: 'async-node',
  },
};

output.clean

5.20.0+

boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

module.exports = {
  //...
  output: {
    clean: true, // 내보내기 전에 output 디렉터리를 정리합니다.
  },
};

module.exports = {
  //...
  output: {
    clean: {
      dry: true, // 삭제하는 대신 제거해야 하는 애셋을 기록합니다.
    },
  },
};

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\//, // 애셋을 'ignored/dir' 아래에 유지합니다.
    },
  },
};

// 또는

module.exports = {
  //...
  output: {
    clean: {
      keep(asset) {
        return asset.includes('ignored/dir');
      },
    },
  },
};

hook과 함께 사용할 수도 있습니다.

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
  'Test',
  (asset) => {
    if (/ignored\/dir\//.test(asset)) return true;
  }
);

`output.compareBeforeEmit`

boolean = true

출력 파일 시스템에 쓰기 전에 내보낼 파일이 이미 존재하고 동일한 내용이 있는지 확인하도록 webpack에 지시합니다.

module.exports = {
  //...
  output: {
    compareBeforeEmit: false,
  },
};

output.crossOriginLoading

boolean = false string: 'anonymous' | 'use-credentials'

청크의 cross-origin 로드를 활성화하도록 webpack에게 전달합니다. script 태그를 추가하여 온 디맨트 청크를 로드할 때 JSONP를 사용하는 'web'으로 target이 설정된 경우에만 적용됩니다.

'anonymous' - 자격 증명 없이 cross-origin 활성화
'use-credentials' - 자격 증명과 함께 cross-origin 활성화

output.cssChunkFilename

string function (pathData, assetInfo) => string

이 옵션은 디스크의 비초기 CSS 출력 파일의 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 'output.filename' 옵션을 참고하세요.

여기에 절대 경로를 지정하면 안 됩니다. 그러나 '/'로 구분된 폴더를 포함해도 됩니다. 이 지정된 경로는 output.path 값과 결합되어 디스크의 위치를 정확히 찾아냅니다.

output.cssFilename

string function (pathData, assetInfo) => string

이 옵션은 디스크의 CSS 출력 파일 이름을 결정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

output.cssHeadDataCompression

5.91.0+

boolean

CSS 파일의 head 태그에 생성된 메타데이터를 압축할지 여부를 결정하는 옵션입니다. 이 옵션의 기본값은 각각 프로덕션에서는 true이고 개발모드에서는 false입니다.

output.devtoolFallbackModuleFilenameTemplate

string function (info)

위의 템플릿 문자열 또는 함수가 중복을 생성할 때 사용되는 폴백입니다.

output.devtoolModuleFilenameTemplate을 참고하세요.

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' function (info) => string

이 옵션은 devtool이 모듈 이름이 필요한 옵션을 사용하는 경우에만 사용됩니다.

각 소스맵의 sources배열에 사용되는 이름을 사용자 정의합니다. 이는 템플릿 문자열 또는 함수를 전달하여 수행할 수 있습니다. 예를 들어 devtool: 'eval'을 사용하는 경우입니다.

webpack.config.js

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate:
      'webpack://[namespace]/[resource-path]?[loaders]',
  },
};

아래의 substitution 항목은 webpack의 내부 ModuleFilenameHelpers를 통해 템플릿 문자열에서 사용할 수 있습니다.

Template	Description
[absolute-resource-path]	절대 경로 파일이름
[all-loaders]	자동 및 명시적 로더, 첫 번째 로더 이름까지 파라미터
[hash]	모듈 식별자의 해시
[id]	모듈 식별자
[loaders]	명시적 로더, 첫 번째 로더 이름까지 파라미터
[resource]	파일을 확인하는 데 사용되는 경로와 첫 번째 로더에서 사용되는 쿼리 파라미터
[resource-path]	쿼리 파라미터없이 파일을 해결하는 경우 사용되는 경로
[namespace]	모듈 네임스페이스. 일반적으로 라이브러리로 빌드할 때 라이브러리의 이름이고 라이브러리가 아니면 비어있음

함수를 사용할 때 info 파라미터를 통해 동일한 옵션을 camel case로 사용할 수 있습니다.

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate: (info) => {
      return `webpack:///${info.resourcePath}?${info.loaders}`;
    },
  },
};

여러 모듈의 이름이 동일한 경우 output.devtoolFallbackModuleFilenameTemplate이 대신 사용됩니다.

output.devtoolNamespace

string

이 옵션은 output.devtoolModuleFilenameTemplate과 함께 사용되는 모듈의 네임스페이스를 결정합니다. 지정되지 않은 경우 기본값은 output.uniqueName입니다. webpack으로 빌드된 여러 라이브러리를 로드할 때 소스맵에서 소스 파일 경로 충돌을 방지하는 경우 사용됩니다.

예를 들어, 네임스페이스가 library1과 library2인 라이브러리가 2개 있고 둘 다 ./src/index.js파일(잠재적으로 다른 내용 포함)이 있는 경우 이 파일은 webpack://library1/./src/index.js, webpack://library2/./src/index.js로 내보내집니다.

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]

엔트리포인트에서 사용할 수 있는 청크 로드의 유형 목록입니다. webpack에 의해 자동으로 채워집니다. 함수를 입력 옵션으로 사용하고, 거기에서 chunkLoading 옵션을 반환할 때만 필요합니다.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    enabledChunkLoadingTypes: ['jsonp', 'require'],
  },
};

output.enabledLibraryTypes

[string]

엔트리 포인트에서 사용할 수 있는 라이브러리 타입 목록입니다.

module.exports = {
  //...
  output: {
    enabledLibraryTypes: ['module'],
  },
};

output.enabledWasmLoadingTypes

[string]

엔트리 포인트에서 사용할 수 있는 wasm 로딩 유형 목록입니다.

module.exports = {
  //...
  output: {
    enabledWasmLoadingTypes: ['fetch'],
  },
};

output.environment

생성된 런타임 코드에서 어떤 종류의 ES 기능을 사용할 수 있는지 webpack에 알려줍니다.

module.exports = {
  output: {
    environment: {
      // 화살표 기능('() => { ... }')을 지원합니다.
      arrowFunction: true,
      // 해당 환경은 async 함수 그리고 await 함수('async function () { await ... }')를 지원합니다.
      asyncFunction: true,
      // BigInt를 문자 그대로 지원합니다(예를 들어, 123n).
      bigIntLiteral: false,
      // const 및 let 변수 선언을 지원합니다.
      const: true,
      // destructuring을 지원합니다('{ a, b } = obj' 처럼 사용합니다).
      destructuring: true,
      // 'document' 변수를 지원합니다.
      document: true,
      // EcmaScript 모듈을 가져오는 비동기 import() 함수를 지원합니다.
      dynamicImport: false,
      // 현재 웹 타켓에 대해서만 worker를 생성할 때 비동기 import()를 지원합니다.
      dynamicImportInWorker: false,
      // 'for of' 반복자를 지원합니다('for (const x of array) { ... }' 처럼 사용합니다).
      forOf: true,
      // 'globalThis'를 지원합니다.
      globalThis: true,
      // ECMAScript 모듈을 가져오는 ECMAScript Module syntax를 지원합니다(import ... from '...' 처럼 사용합니다).
      module: false,
      // 이를 지원하는 환경에서 코어 모듈 가져오기에 대해 node: prefix가 생성될지 여부를 결정합니다.
      // 이는 Webpack 런타임 코드에만 적용됩니다.
      nodePrefixForCoreModules: false,
      // 옵셔널 체이닝('obj?.a' 또는 'obj?.()')을 지원합니다.
      optionalChaining: true,
      // 템플릿 리터럴을 지원합니다.
      templateLiteral: true,
    },
  },
};

output.filename

string function (pathData, assetInfo) => string

이 옵션은 각 출력 번들의 이름을 결정합니다. 번들은 output.path 옵션으로 지정된 디렉터리에 작성됩니다.

단일 엔트리 포인트의 경우 정적인 이름으로 설정할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js',
  },
};

그러나 둘 이상의 엔트리 포인트, 코드 분할 또는 다양한 플러그인을 통해 여러 번들을 생성할 때 다음 substitution 중 하나를 사용하여 각 번들에 고유한 이름을 부여해야 합니다.

엔트리 이름을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].bundle.js',
  },
};

내부 청크 id를 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js',
  },
};

생성된 콘텐츠에서 생성된 해시를 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.js',
  },
};

여러 substitution을 조합할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

파일 이름을 반환하는 함수를 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

자세한 내용은 캐싱 가이드를 참고하세요. 이 옵션을 설정하는 것보다 더 많은 단계를 필요로 합니다.

이 옵션의 이름은 filename 이지만 'js/[name]/bundle.js'와 같이 폴더 구조의 이름을 사용할 수 있습니다.

Template strings

다음 substitution은 webpack의 내부 TemplatedPathPlugin를 통해 템플릿 문자열에서 사용할 수 있습니다.

컴파일 수준에서 사용할 수 있는 substitution입니다.

Template	Description
[fullhash]	컴파일 전체 해시
[hash]	더 이상 지원되지 않음

청크 수준에서 사용할 수 있는 substitution입니다.

Template	Description
[id]	청크의 identifier
[name]	청크의 이름, 설정되지 않은 경우 청크의 ID
[chunkhash]	청크의 모든 요소를 포함한 청크의 해시
[contenthash]	콘텐츠 타입의 요소만 포함하는 청크의 해시 (`optimization.realContentHash`의 영향을 받음)

모듈 수준에서 사용할 수 있는 substitution입니다.

Template	Description
[id]	모듈의 id
[moduleid]	더 이상 지원되지 않음
[hash]	모듈의 해시
[modulehash]	더 이상 지원되지 않음
[contenthash]	모듈 콘텐츠의 해시

파일 수준에서 사용할 수 있는 substitution입니다.

Template	Description
[file]	쿼리 또는 fragment가 없는 파일 이름 및 경로
[query]	앞에 `?`가 있는 쿼리
[fragment]	앞에 `#`가 있는 fragment
[base]	경로없이 확장자를 포함한 파일 이름
[filebase]	더 이상 지원되지 않음
[path]	파일 이름을 제외한 경로
[name]	확장자나 경로가 없는 파일 이름
[ext]	`.`으로 시작하는 확장자 (output.filename에 사용할 수 없음)

URL 수준에서 사용할 수 있는 substitution입니다.

Template	Description
[url]	URL

해시 길이([hash], [contenthash] 또는 [chunkhash])는 [hash:16](기본값 20)을 사용하여 지정할 수 있습니다. 또는 output.hashDigestLength를 지정하여 길이를 전역적으로 설정합니다.

실제 파일 이름에 자리 표시자 중 하나를 사용하려는 경우 자리 표시자를 필터링 할 수 있습니다. 예를 들어 [name].js 파일을 출력하려면 대괄호 사이에 백 슬래시를 추가하여 [name] 자리 표시자를 이스케이프해야합니다. 따라서 [\name\]은 애셋의 name으로 대체되는 대신 [name]을 생성합니다.

예제: [\id\]는 id로 교체되지 않고 [id]를 생성합니다.

이 옵션에 대한 함수를 사용하는 경우 함수는 위 표의 substitution 데이터를 포함하는 객체로 전달됩니다. 반환된 문자열에도 substitution이 적용됩니다. 전달 된 객체의 타입은 다음과 같습니다. 프로퍼티는 컨텍스트에 따라 사용 가능합니다.

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string;
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};
type ChunkPathData = {
  id: string | number;
  name: string;
  hash: string;
  hashWithLength: (number) => string;
  contentHash: Record<string, string>;
  contentHashWithLength: Record<string, (number) => string>;
};
type ModulePathData = {
  id: string | number;
  hash: string;
  hashWithLength: (number) => string;
};

output.globalObject

string = 'self'

라이브러리를 대상으로 할 때, 특히 library.type이 'umd'인 경우 이 옵션은 라이브러리를 마운트하는 데 사용할 전역 객체를 나타냅니다. UMD빌드를 브라우저와 Node.js에서 모두 사용할 수 있도록 하려면 output.globalObject를 'this'로 설정하세요. 웹과 유사한 대상의 경우 기본값은 self입니다.

엔트리 포인트의 반환 값은 output.library.name 값을 사용하여 전역 객체에 할당됩니다. type 옵션의 값에 따라 전역 객체가 각각 저마다 변경될 수 있습니다. (예: self, global, globalThis)

예제:

webpack.config.js

module.exports = {
  // ...
  output: {
    library: {
      name: 'myLib',
      type: 'umd',
    },
    filename: 'myLib.js',
    globalObject: 'this',
  },
};

output.hashDigest

string = 'hex'

해시를 생성할 때 사용하는 인코딩입니다. Node.JS의 모든 인코딩 hash.digest가 지원됩니다. 파일 이름에'base64'를 사용하면 알파벳에 / 문자가 있으므로 문제가 될 수 있습니다. 마찬가지로'latin1'은 모든 문자를 포함 할 수 있습니다.

output.hashDigestLength

number = 20

사용할 해시 다이제스트의 접두사 길이입니다.

output.hashFunction

string = 'md4' function

사용할 해싱 알고리즘입니다. Node.JS의 crypto.createHash의 모든 기능이 지원됩니다. 4.0.0-alpha2부터 hashFunction은 커스텀 해시 함수의 생성자가 될 수 있습니다. 성능상의 이유로 비 암호화 해시 함수를 제공할 수 있습니다.

module.exports = {
  //...
  output: {
    hashFunction: require('metrohash').MetroHash64,
  },
};

해싱 함수에서 update 및 digest 메소드를 사용할 수 있는지 확인하세요.

output.hashSalt

Node.JS의 hash.update를 통해 해시를 업데이트하기 위해 선택적으로 사용할 수 있는 솔트입니다.

output.hotUpdateChunkFilename

string = '[id].[fullhash].hot-update.js'

핫 업데이트 청크의 파일 이름을 사용자 지정합니다. 가능한 값에 대한 자세한 내용은 output.filename 옵션을 참고하세요.

여기서 허용되는 유일한 자리 표시자는 [id], [fullhash]이며 기본값은 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
  },
};

output.hotUpdateGlobal

string

target이 핫 업데이트 로드에 JSONP를 사용하는 'web'으로 설정된 경우에만 사용됩니다.

핫 업데이트 청크를 비동기 적으로 로드하는 경우 사용되는 JSONP 함수입니다.

자세한 정보는 output.chunkLoadingGlobal을 참고하세요.

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json' function

주요 핫 업데이트 파일 이름을 사용자 지정합니다. [fullhash], [runtime]을 자리 표시자로 사용할 수 있습니다.

output.iife

boolean = true

내보낸 코드에 IIFE 래퍼를 추가하도록 webpack에 지시합니다.

module.exports = {
  //...
  output: {
    iife: true,
  },
};

output.ignoreBrowserWarnings

5.81.0+

boolean = false

프로덕션 환경에서 브라우저 콘솔의 경고를 숨깁니다. 이 옵션은 터미널/콘솔 출력에 영향을 주지 않습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    ignoreBrowserWarnings: true,
  },
};

output.importFunctionName

string = 'import'

네이티브 import()함수의 이름입니다. dynamic-import-polyfill같은 폴리필에 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    importFunctionName: '__import__',
  },
};

output.importMetaName

string

네이티브 import.meta 객체의 이름입니다(폴리필로 교체 가능).

webpack.config.js

module.exports = {
  //...
  output: {
    importMetaName: 'pseudoImport.meta',
  },
};

output.library

엔트리 포인트의 export를 내보내는 라이브러리를 설정합니다.

Type: string | string[] | object

간단한 예제를 살펴 보겠습니다.

webpack.config.js

module.exports = {
  // …
  entry: './src/index.js',
  output: {
    library: 'MyLibrary',
  },
};

src/index.js 엔트리에서 함수를 export했다고 가정하겠습니다.

export function hello(name) {
  console.log(`hello ${name}`);
}

이제 변수 MyLibrary가 엔트리 파일의 export와 바인딩됩니다. 다음은 webpack 번들 라이브러리를 사용하는 방법입니다.

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello('webpack');
</script>

위의 예에서 우리는 단일 엔트리 파일을 entry에 전달하고 있지만, webpack은 array 또는 객체 같이 많은 종류의 엔트리 포인트를 받아들일 수 있습니다.

entry 포인트로 array를 제공하면 배열의 마지막 항목만 내보냅니다.

module.exports = {
  // …
  entry: ['./src/a.js', './src/b.js'], // 오직 b.js의 출력만 노출됩니다.
  output: {
    library: 'MyLibrary',
  },
};

객체가 entry 포인트로 제공되면 library의 array 구문을 사용하여 모든 항목을 내보낼 수 있습니다.

module.exports = {
  // …
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    library: ['MyLibrary', '[name]'], // name is a placeholder here
  },
};

a.js와 b.js가 둘 다 hello함수를 export 하는것으로 가정하면 다음은 라이브러리를 사용하는 방법입니다.

<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello('webpack');
  MyLibrary.b.hello('webpack');
</script>

자세한 정보는 이 예제를 참고하세요.

엔트리 포인트 별로 라이브러리 옵션을 설정하려는 경우 위 설정이 예상대로 작동하지 않습니다. 각 엔트리 별 설정에 대한 방법은 아래와 같습니다.

module.exports = {
  // …
  entry: {
    main: {
      import: './src/index.js',
      library: {
        // `output.library`의 모든 옵션을 여기서 사용할 수 있습니다.
        name: 'MyLibrary',
        type: 'umd',
        umdNamedDefine: true,
      },
    },
    another: {
      import: './src/another.js',
      library: {
        name: 'AnotherLibrary',
        type: 'commonjs2',
      },
    },
  },
};

output.library.amdContainer

5.78.0+

컨테이너(전역 공간에 정의됨)를 사용하여 AMD 모듈에서 define/require 함수를 호출합니다.

module.exports = {
  // …
  output: {
    library: {
      amdContainer: 'window["clientContainer"]',
      type: 'amd', // or 'amd-require'
    },
  },
};

그러면 다음과 같은 번들이 생성됩니다.

window['clientContainer'].define(/*define args*/); // 또는 'amd-require' window['clientContainer'].require(/*require args*/);

output.library.name

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
    },
  },
};

라이브러리 이름을 설정할 수 있습니다.

Type:

string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}

output.library.type

라이브러리가 내보내지는 방식을 설정합니다.

타입: string

기본적으로 포함되는 타입은 'var', 'module', 'modern-module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'commonjs-static', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' 그리고 'system'입니다. 다른 것들은 플러그인에 의해 추가될 수 있습니다.

다음 예에서는 _entry_return_을 사용하여 엔트리 포인트에서 반환한 값을 나타냅니다.

Expose a Variable

이 옵션은 번들이 포함된 범위에서 output.library.name이 제공한 이름에 엔트리 포인트의 반환 값(export한 엔트리 포인트에 관계없이)을 할당합니다.

type: 'var'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
    },
  },
};

라이브러리가 로드되면 엔트리 포인트의 반환 값이 변수에 할당됩니다.

var MyLibrary = _entry_return_;

// `MyLibrary`가 로드 된 별도의 스크립트
MyLibrary.doSomething();

type: 'assign'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign',
    },
  },
};

이렇게 하면 기존 값을 다시 할당할 수 있는 암시적인 전역이 생성됩니다. 이 값은 주의해서 사용해야 합니다.

MyLibrary = _entry_return_;

MyLibrary가 이전에 정의되지 않은 경우 라이브러리는 전역 범위로 설정됩니다.

type: 'assign-properties'

5.16.0+

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign-properties',
    },
  },
};

type: 'assign'과 유사하지만 이미 존재하는 경우 MyLibrary를 재사용하므로 더 안전한 옵션입니다.

// 존재하지 않는 경우에만 MyLibrary를 만듭니다.
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// 그런 다음 반환 값을 MyLibrary에 복사합니다.
// Object.assign이 하는 동작과 같습니다.

// 예를 들어 다음과 같이 엔트리에 `hello`함수를 export합니다.
export function hello(name) {
  console.log(`Hello ${name}`);
}

// MyLibrary가 로드된 다른 스크립트에서
// 이렇게 `hello`함수를 실행할 수 있습니다.
MyLibrary.hello('World');

Expose Via Object Assignment

이 옵션은 output.library.name에 정의된 이름 아래의 특정 객체에 엔트리 포인트의 반환 값(export한 엔트리 포인트에 관계없이)을 할당합니다.

type: 'this'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'this',
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name이라는 속성 아래의 this에 할당됩니다. this의 의미는 당신에게 달려있습니다.

this['MyLibrary'] = _entry_return_;

// 별도의 스크립트
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // `this`가 window인 경우

type: 'window'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'window',
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name값을 사용하여 window 객체에 할당됩니다.

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

type: 'global'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'global',
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name값을 사용하여 전역 개체에 할당됩니다. target 값에 따라 전역 객체가 self, global 또는 globalThis로 변경될 수 있습니다.

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

type: 'commonjs'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'commonjs',
    },
  },
};

엔트리 포인트의 반환 값은 output.library.name 값을 사용하여 exports객체에 할당됩니다. 이름에서 알 수 있듯이 CommonJS 환경에서 사용됩니다.

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

Module Definition Systems

이 옵션은 다양한 모듈 시스템과의 호환성을 보장하기 위한 헤더와 함께 제공되는 번들을 생성합니다. output.library.name은 output.library.type에서 다른 의미를 갖습니다.

type: 'module'

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // 여기에 `name`을 지정하지 마세요.
      type: 'module',
    },
  },
};

ES 모듈을 출력합니다.

그러나 이 기능은 아직 실험적이며 완전히 지원되지 않으므로 experiments.outputModule을 활성화해야 합니다. 또한 이 스레드에서 개발 진행 상황을 추적할 수 있습니다.

type: 'modern-module'

v5.93.0+

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // 여기에 `name`을 지정하지 마세요
      type: 'modern-module',
    },
  },
};

이 설정은 ES 모듈에 대해 트리 쉐이킹 가능한 출력을 생성합니다.

하지만 이 기능은 아직 실험 단계이며 완전히 지원되지 않으므로 미리 experiments.outputModule을 활성화해야 합니다.

type: 'commonjs2'

module.exports = {
  // …
  output: {
    library: {
      // 여기에는 `name`이 없습니다.
      type: 'commonjs2',
    },
  },
};

엔트리 포인트의 반환 값은 module.exports에 할당됩니다. 이름에서 알 수 있듯이 Node.js (CommonJS) 환경에서 사용됩니다.

module.exports = _entry_return_;

require('MyLibrary').doSomething();

type: commmonjs2와 함께 output.library.name을 지정하면 엔트리 포인트의 반환 값이 module.exports.[output.library.name]에 할당됩니다.

type: 'commonjs-module'

commonjs-module은 commonjs2와 동일합니다. 향후 버전에서는 commonjs-module을 제거할 수 있습니다.

type: 'commonjs-static'

5.66.0+

module.exports = {
  // …
  output: {
    library: {
      // 참고로 여기에는 `name`이 없습니다
      type: 'commonjs-static',
    },
  },
};

개별 내보내기는 module.exports의 속성으로 설정됩니다. 이름의 "static"은 정적으로 분석 가능한 출력을 의미하므로 명명된 내보내기는 Node.js를 통해 ESM으로 가져올 수 있습니다.

입력:

export function doSomething() {}

출력:

function doSomething() {}

// …

exports.doSomething = __webpack_exports__.doSomething;

Consumption (CommonJS):

const { doSomething } = require('./output.cjs'); // doSomething => [Function: doSomething]

Consumption (ESM):

import { doSomething } from './output.cjs'; // doSomething => [Function: doSomething]

type: 'amd'

라이브러리를 AMD 모듈로 내보냅니다.

AMD 모듈은 일반적으로 RequireJS 또는 almond같은 호환 가능한 로더에서 제공하는 define 및 require와 같은 특정 속성으로 엔트리 청크(<script>태그에 의해 로드된 첫 번째 스크립트)를 정의해야합니다.

아래의 설정을 참고하세요.

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd',
    },
  },
};

생성된 출력은 "MyLibrary"라는 이름으로 정의됩니다. 예제는 아래와 같습니다.

define('MyLibrary', [], function () {
  return _entry_return_;
});

번들은 script 태그의 일부로 포함될 수 있으며 번들은 다음과 같이 호출될 수 있습니다.

require(['MyLibrary'], function (MyLibrary) {
  // 라이브러리로 무언가를 할 수 있습니다.
});

output.library.name이 정의되어 있지 않으면 아래의 코드가 대신 생성됩니다.

define(function () {
  return _entry_return_;
});

이 번들은 예상대로 작동하지 않거나 almond 로더의 경우 <script>태그를 사용하여 직접 로드했을 때 전혀 작동하지 않습니다. 해당 파일의 실제 경로를 통해 RequireJS 호환 비동기 모듈 로더를 통해서만 작동하므로, 이 경우 output.path 및 output.filename이 서버에 직접 노출되는 경우 특정 설정에서 중요할 수 있습니다.

type: 'amd-require'

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd-require',
    },
  },
};

즉시 실행되는 AMD require(dependencies, factory)래퍼로 출력을 패키징합니다.

'amd-require' 타입을 사용하면 나중에 별도의 호출없이 AMD 디펜던시를 사용할 수 있습니다. 'amd' 타입과 마찬가지로 이는 webpack 출력이 로드되는 환경에서 사용할 수 있는 적절한 require 함수에 따라 달라집니다.

이 타입에서는 라이브러리 이름을 사용할 수 없습니다.

type: 'umd'

이렇게 하면 모든 모듈 정의 아래에 라이브러리가 내보내져서 CommonJS, AMD 및 전역 변수와 함께 작동 할 수 있습니다. 자세한 내용은 UMD Repository를 참고하세요.

이 경우 모듈 이름을 지정하려면 library.name 프로퍼티가 필요합니다.

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(global, function () {
  return _entry_return_;
});

library.name을 생략하면 객체 할당 섹션에 설명 된 대로 엔트리 포인트에서 반환된 모든 속성이 루트 객체에 직접 할당됩니다. 예제는 아래와 같습니다.

module.exports = {
  //...
  output: {
    type: 'umd',
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(global, function () {
  return _entry_return_;
});

target마다 다른 이름을 설정하기 위해 library.name에 대한 객체를 설정할 수 있습니다.

module.exports = {
  //...
  output: {
    library: {
      name: {
        root: 'MyLibrary',
        amd: 'my-library',
        commonjs: 'my-common-library',
      },
      type: 'umd',
    },
  },
};

type: 'system'

라이브러리를 System.register모듈로 내보냅니다. 이 기능은 webpack 4.30.0에서 처음 출시되었습니다.

시스템 모듈은 webpack 번들이 실행될 때 브라우저에 전역 변수 System이 있어야합니다. System.register형식으로 컴파일하면 추가 설정없이 System.import('/bundle.js')를 수행하고 webpack 번들을 시스템 모듈 레지스트리에 로드할 수 있습니다.

module.exports = {
  //...
  output: {
    library: {
      type: 'system',
    },
  },
};

출력은 다음과 같습니다.

System.register([], function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
  return {
    execute: function () {
      // ...
    },
  };
});

output.library.type을 system으로 설정하는 것 외에도 output.library.name을 설정에 추가하면 출력 번들은 System.register에 대한 인수로 라이브러리 이름을 갖게됩니다.

System.register(
  'MyLibrary',
  [],
  function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
    return {
      execute: function () {
        // ...
      },
    };
  }
);

Other Types

type: 'jsonp'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'jsonp',
    },
  },
};

이것은 엔트리 포인트의 반환 값을 jsonp 래퍼로 래핑합니다.

MyLibrary(_entry_return_);

라이브러리에 대한 디펜던시는 externals 설정에 의해 정의됩니다.

output.library.export

라이브러리로 노출되어야하는 export를 지정할 수 있습니다.

Type: string | string[]

undefined가 기본값으로 설정되어 있으며 전체 네임스페이스 객체를 내보냅니다. 아래 예는 output.library.type: 'var'를 사용할 때 이 설정의 효과를 보여줍니다.

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: 'default',
    },
  },
};

엔트리 포인트의 기본 export가 라이브러리 이름에 할당됩니다.

// 엔트리에 default export가 있는 경우
var MyLibrary = _entry_return_.default;

output.library.export에도 배열을 전달할 수 있으며, 라이브러리 이름에 할당될 모듈의 경로로 해석됩니다.

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: ['default', 'subModule'],
    },
  },
};

아래는 라이브러리 코드입니다.

var MyLibrary = _entry_return_.default.subModule;

output.library.auxiliaryComment

UMD 래퍼에 주석을 추가합니다.

Type: string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

각 umd 타입에 대해 동일한 주석을 삽입하려면 auxiliaryComment를 문자열로 설정하세요.

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: 'Test Comment',
    },
  },
};

아래와 같은 산출물이 생성됩니다.

(function webpackUniversalModuleDefinition(root, factory) {
  //Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  //Test Comment
  else if (typeof define === 'function' && define.amd) define([], factory);
  //Test Comment
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  //Test Comment
  else root['MyLibrary'] = factory();
})(self, function () {
  return _entry_return_;
});

세부적인 제어를 위해 객체를 전달합니다.

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: {
        root: 'Root Comment',
        commonjs: 'CommonJS Comment',
        commonjs2: 'CommonJS2 Comment',
        amd: 'AMD Comment',
      },
    },
  },
};

output.library.umdNamedDefine

boolean

output.library.type: "umd"를 사용할 때 output.library.umdNamedDefine을 true로 설정하면 UMD 빌드의 AMD 모듈 이름이 지정됩니다. 그렇지 않으면 익명의 define이 사용됩니다.

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      umdNamedDefine: true,
    },
  },
};

AMD 모듈은 다음과 같습니다.

define('MyLibrary', [], factory);

output.libraryExport

string [string]

libraryTarget을 통해 노출될 모듈을 구성합니다. 기본적으로 undefined이며 libraryTarget을 ''같이 빈 문자열로 설정하면 동일한 동작이 적용됩니다(전체 네임 스페이스 객체를 export). 아래 예제는 libraryTarget: 'var'를 사용할 때 이 설정의 효과를 보여줍니다.

다음 설정이 지원됩니다.

libraryExport: 'default' - 엔트리 포인트의 default export 가 라이브러리 target에 할당됩니다.

// 엔트리에 `MyDefaultModule`의 default export가 있는 경우
var MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - 지정된 모듈 이 라이브러리 target에 할당됩니다.

var MyModule = _entry_return_.MyModule;

libraryExport: ['MyModule', 'MySubModule'] - 배열은 라이브러리 target에 할당 될 모듈 경로 로 해석됩니다.

var MySubModule = _entry_return_.MyModule.MySubModule;

위에 지정된 libraryExport 설정을 사용하면 결과 라이브러리를 다음과 같이 활용할 수 있습니다.

MyDefaultModule.doSomething();
MyModule.doSomething();
MySubModule.doSomething();

output.libraryTarget

string = 'var'

라이브러리를 내보내는 방식을 설정합니다. 다음 옵션 중 하나를 사용할 수 있습니다. 이 옵션은 output.library에 할당된 값과 함께 작동합니다. 다음 예에서는 output.library의 값이 MyLibrary로 설정되어 있다고 가정합니다.

Expose a Variable

이 옵션은 번들이 포함된 모든 범위에서 output.library에서 제공한 이름에 엔트리 포인트의 반환 값을 할당합니다.

libraryTarget: 'var'

라이브러리가 로드되면 엔트리 포인트의 반환 값이 변수에 할당됩니다.

var MyLibrary = _entry_return_;

// In a separate script...
MyLibrary.doSomething();

libraryTarget: 'assign'

이렇게 하면 기존 값을 다시 할당할 수 있는 암시적인 전역이 생성됩니다. 주의해서 사용하세요.

MyLibrary = _entry_return_;

MyLibrary가 이전에 정의되지 않은 경우 라이브러리는 전역 범위로 설정됩니다.

libraryTarget: 'assign-properties'

5.16.0+

반환 값이 있는 경우 대상 객체에 복사하고, 그렇지 않으면 먼저 대상 객체를 만듭니다.

// 존재하지 않는 경우 대상 객체를 만듭니다.
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// 그런 다음 반환 값을 MyLibrary에 복사하세요.
// Object.assign이 하는 동작과 같습니다.

// 예를 들어 다음과 같이 항목에 `hello` 함수를 export합니다.
export function hello(name) {
  console.log(`Hello ${name}`);
}

// MyLibrary를 실행하는 다른 스크립트에서
// 이렇게 `hello`함수를 실행할 수 있습니다.
MyLibrary.hello('World');

Expose Via Object Assignment

이 옵션은 엔트리 포인트의 반환 값(export한 엔트리 포인트에 관계없이)을 output.library에 정의된 이름으로 특정 객체에 할당합니다.

output.library에 빈 문자열이 할당된 경우 기본 동작은 엔트리 포인트에서 반환된 모든 프로퍼티가 다음 코드를 통해 output.libraryTarget에 정의된 대로 객체에 할당되는 것입니다.

(function (e, a) {
  for (var i in a) {
    e[i] = a[i];
  }
})(output.libraryTarget, _entry_return_);

libraryTarget: 'this'

엔트리 포인트의 반환 값은 output.library라는 프로퍼티 아래에 할당됩니다. this의 의미는 당신에게 달려있습니다.

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // this가 window인 경우

libraryTarget: 'window'

엔트리 포인트의 반환 값은 output.library 값을 사용하여 window 객체에 할당됩니다.

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

libraryTarget: 'global'

엔트리 포인트의 반환 값은 output.library 값을 사용하여 global 객체에 할당됩니다.

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

libraryTarget: 'commonjs'

엔트리 포인트의 반환 값은 output.library 값을 사용하여 exports 객체에 할당됩니다. 이름에서 알 수 있듯이 CommonJS 환경에서 사용됩니다.

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

Module Definition Systems

이 옵션은 다양한 모듈 시스템과의 호환성을 보장하기 위해 헤더와 함께 제공되는 번들을 생성합니다. output.library는 output.libraryTarget에서 다른 의미를 갖습니다.

libraryTarget: 'module'

ES 모듈을 출력합니다. 미리 experiments.outputModule을 활성화해야 합니다.

이 기능은 아직 완전히 지원되지 않습니다. 이 스레드에서 진행 상황을 추적하세요.

libraryTarget: 'commonjs2'

엔트리 포인트의 반환 값은 module.exports에 할당됩니다. 이름에서 알 수 있듯이 CommonJS 환경에서 사용됩니다.

module.exports = _entry_return_;

require('MyLibrary').doSomething();

output.library는 output.libraryTarget과 함께 사용할 수 없습니다. 자세한 내용은 이 이슈를 참고하세요.

libraryTarget: 'amd'

라이브러리를 AMD 모듈로 내보냅니다.

아래의 설정을 참고하세요.

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'amd',
  },
};

생성된 출력은 "MyLibrary"라는 이름으로 정의됩니다. 예제는 아래와 같습니다.

define('MyLibrary', [], function () {
  return _entry_return_;
});

번들은 script 태그의 일부로 포함될 수 있으며 번들은 다음과 같이 호출될 수 있습니다.

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

output.library가 정의되어 있지 않다면, 아래의 코드가 대신 생성됩니다.

define([], function () {
  return _entry_return_;
});

libraryTarget: 'amd-require'

이 옵션은 즉시 실행되는 AMD require(dependencies, factory)래퍼로 출력을 패키징합니다.

'amd-require'를 사용하면 나중에 별도의 호출없이 AMD 디펜던시를 사용할 수 있습니다. 'amd'와 마찬가지로 이는 webpack 출력이 로드되는 환경에서 사용할 수 있는 적절한 require 함수에 따라 달라집니다.

'amd-require'를 사용하면 라이브러리 이름이 무시됩니다.

libraryTarget: 'umd'

이 경우 모듈 이름을 지정하려면 library 프로퍼티가 필요합니다.

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

library를 생략하면 객체 할당 섹션에 설명 된 대로 엔트리 포인트에서 반환된 모든 속성이 루트 객체에 직접 할당됩니다. 예제는 아래와 같습니다.

module.exports = {
  //...
  output: {
    libraryTarget: 'umd',
  },
};

출력은 다음과 같습니다.

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

webpack 3.1.0부터는 target마다 다른 이름을 설정하기 위해 library에 대한 객체를 설정할 수 있습니다.

module.exports = {
  //...
  output: {
    library: {
      root: 'MyLibrary',
      amd: 'my-library',
      commonjs: 'my-common-library',
    },
    libraryTarget: 'umd',
  },
};

libraryTarget: 'system'

라이브러리를 System.register모듈로 내보냅니다. 이 기능은 webpack 4.30.0에서 처음 출시되었습니다.

시스템 모듈은 webpack 번들이 실행될 때 브라우저에 전역 변수 System이 있어야 합니다. System.register형식으로 컴파일하면 추가 설정없이 System.import('/bundle.js')를 수행하고 webpack 번들을 시스템 모듈 레지스트리에 로드할 수 있습니다.

module.exports = {
  //...
  output: {
    libraryTarget: 'system',
  },
};

출력은 다음과 같습니다.

System.register([], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

output.libraryTarget을 system으로 설정하는 것 외에도 output.library를 설정에 추가하면 출력 번들은 System.register에 대한 인수를 라이브러리 이름으로 갖게됩니다.

System.register('my-library', [], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

__system_context__를 통해 SystemJS 컨텍스트에 접근할 수 있습니다.

// 현재 SystemJS 모듈의 URL을 기록합니다.
console.log(__system_context__.meta.url);

// 현재 SystemJS 모듈의 URL을 parentUrl로 사용하여 SystemJS 모듈을 가져옵니다.
__system_context__.import('./other-file.js').then((m) => {
  console.log(m);
});

Other Targets

libraryTarget: 'jsonp'

이것은 엔트리 포인트의 반환 값을 jsonp 래퍼로 래핑합니다.

MyLibrary(_entry_return_);

라이브러리에 대한 디펜던시는 externals 설정에 의해 정의됩니다.

output.module

boolean = false

모듈 타입으로 JavaScript 파일을 출력합니다. 실험적 기능이므로 기본적으로 비활성화되어 있습니다.

활성화되면 webpack은 내부적으로 output.iife를 false로, output.scriptType을 'module'로, terserOptions.module을 true로 설정합니다.

다른 사용자가 사용할 라이브러리를 컴파일하기 위해 webpack을 사용하는 경우 output.module이 true 일 때 output.libraryTarget을 'module'로 설정해야 합니다.

module.exports = {
  //...
  experiments: {
    outputModule: true,
  },
  output: {
    module: true,
  },
};

output.path

string = path.join(process.cwd(), 'dist')

절대 경로로 출력 디렉터리를 설정합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
};

이 파라미터의 [fullhash]는 컴파일의 해시로 대체됩니다. 자세한 내용은 캐싱 가이드를 참고하세요.

output.pathinfo

boolean=true string: 'verbose'

포함된 모듈에 대한 정보를 주석으로 번들에 포함하도록 webpack에 지시합니다. 이 옵션의 기본값은 development에서 true이고 production 모드에서는 false입니다. 'verbose'는 export, 런타임 요구 사항 및 bailouts와 같은 더 많은 정보를 보여줍니다.

webpack.config.js

module.exports = {
  //...
  output: {
    pathinfo: true,
  },
};

output.publicPath

string function

이것은 온 디맨드 로드를 사용하거나 이미지, 파일 등과 같은 외부 리소스를 로드할 때 중요한 옵션입니다. 잘못된 값을 지정하면 리소스를 로드하는 동안 404 오류가 발생합니다.

이 옵션은 브라우저에서 참조될 때 출력 디렉터리의 공용 URL 을 지정합니다. 상대 URL은 HTML 페이지 또는<base>태그를 기준으로 확인됩니다. 서버 상대 URL, 프로토콜 상대 URL 또는 절대 URL도 가능하며 때로는 필요합니다(CDN에서 애셋을 호스팅 하는 경우).

옵션의 값은 런타임 또는 로더가 생성한 모든 URL에 접두사로 추가됩니다. 이 때문에 이 옵션의 값은 대부분의 경우 / 로 끝납니다.

간단한 규칙: HTML 페이지에서 output.path URL을 볼 수 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/',
  },
};

이 설정의 경우 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js',
  },
};

청크에 대한 요청은 /assets/4.chunk.js와 같습니다.

HTML을 출력하는 로더는 다음과 같이 출력할 수 있습니다.

<link href="/assets/spinner.gif" />

또는 CSS에서 이미지를 로드할 때는 다음과 같습니다.

background-image: url(/assets/spinner.gif);

webpack-dev-server는 publicPath에서 힌트를 가져 와서 출력 파일을 제공할 위치를 결정합니다.

이 파라미터의 [fullhash]는 컴파일의 해시로 대체됩니다. 자세한 내용은 캐싱 가이드를 참고하세요.

Examples:

module.exports = {
  //...
  output: {
    // 아래 중 하나
    publicPath: 'auto', // `import.meta.url`, `document.currentScript`, `<script />` 또는 `self.location`에서 public path를 자동으로 결정합니다.
    publicPath: 'https://cdn.example.com/assets/', // CDN (항상 HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (같은 프로토콜)
    publicPath: '/assets/', // 서버의 상대 경로
    publicPath: 'assets/', // HTML 페이지의 상대 경로
    publicPath: '../assets/', // HTML 페이지의 상대 경로
    publicPath: '', // HTML 페이지의 상대 경로 (같은 디렉터리)
  },
};

컴파일 타임에 출력 파일의 publicPath를 알 수 없는 경우 공백으로 남겨두고 런타임에 자유 변수 __webpack_public_path__를 사용하여 엔트리 파일에서 동적으로 설정할 수 있습니다.

__webpack_public_path__ = myRuntimePublicPath;

// 애플리케션 엔트리의 나머지

__webpack_public_path__에 대한 자세한 정보는 이 논의를 참고하세요.

output.scriptType

string: 'module' | 'text/javascript' boolean = false

이 옵션을 사용하면 <script type="module"...>과 같은 커스텀 스크립트 타입으로 비동기 청크를 로드할 수 있습니다.

module.exports = {
  //...
  output: {
    scriptType: 'module',
  },
};

output.sourceMapFilename

string = '[file].map[query]'

소스맵 이름을 짓는 방법을 설정합니다. devtool이 출력 파일을 쓰는 'source-map'으로 설정된 경우에만 적용됩니다.

output.filename의 [name], [id], [fullhash] 그리고 [chunkhash] substitution을 사용할 수 있습니다. 그 외에도 템플릿 문자열의 파일 이름 수준 아래에 나열된 substitution을 사용할 수 있습니다.

output.sourcePrefix

string = ''

출력 번들의 각 줄에 대한 접두사를 변경합니다.

webpack.config.js

module.exports = {
  //...
  output: {
    sourcePrefix: '\t',
  },
};

output.strictModuleErrorHandling

성능 비용으로 EcmaScript 모듈 사양에 따라 모듈 로딩시에 발생하는 오류를 처리합니다.

타입: boolean
가능한 버전: 5.25.0+

module.exports = {
  //...
  output: {
    strictModuleErrorHandling: true,
  },
};

output.strictModuleExceptionHandling

boolean = false

require 될 때 예외가 발생하면 webpack에게 모듈 인스턴스 캐시(require.cache)에서 모듈을 제거하도록 지시합니다.

성능상의 이유로 기본값은 false입니다.

false로 설정하면 모듈이 캐시에서 제거되지 않으므로 첫 번째 require호출에서만 예외가 발생합니다(node.js와 호환되지 않음).

예를 들어 module.js를 고려해봅시다.

throw new Error('error');

strictModuleExceptionHandling을 false로 설정하면 첫 번째 require만 예외가 발생합니다.

// strictModuleExceptionHandling = false 로 설정
require('module'); // <- 예외 발생
require('module'); // <- 예외 발생하지 않음

대신 strictModuleExceptionHandling을 true로 설정하면 이 모듈의 모든 require에서 예외가 발생합니다.

// strictModuleExceptionHandling = true 로 설정
require('module'); // <- 예외 발생
require('module'); // <- 예외 발생

output.trustedTypes

true string object

5.37.0+

신뢰할 수 있는 타입 호환성을 제어합니다. 활성화되면 webpack은 신뢰할 수 있는 타입 지원을 감지하고 지원하는 경우 신뢰할 수 있는 타입 정책을 사용하여 동적으로 로드하는 스크립트 URL을 생성합니다. 애플리케이션이 require-trusted-types-for 콘텐츠 보안 정책 지침에 따라 실행될 때 사용합니다.

기본적으로 비활성화되어 있습니다(호환성 없음, 스크립트 URL은 문자열).

true로 설정하면 webpack은 output.uniqueName을 신뢰할 수 있는 타입 정책 이름으로 사용합니다.
비어 있지 않은 문자열로 설정하면 해당 값이 정책 이름으로 사용됩니다.
객체로 설정하면 객체의 policyName프로퍼티에서 정책 이름을 가져옵니다.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
    },
  },
};

output.trustedTypes.onPolicyCreationFailure

string = 'stop': 'continue' | 'stop'

5.82.0+

[require-trusted-types-for 'script'](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security- Policy/require-trusted-types-for)가 적용되지 않았거나 정책 이름이 CSP 'trusted-types' 목록에 없거나 중복되어 'trustedTypes.createPolicy(...)'에 대한 호출이 실패하는 경우 즉시 실패 처리합니다.

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
      onPolicyCreationFailure: 'continue',
    },
  },
};

output.umdNamedDefine

boolean

libraryTarget: "umd"를 사용할 때 output.umdNamedDefine을 true로 설정하면 UMD 빌드의 AMD 모듈 이름이 지정됩니다. 그렇지 않으면 익명의 define이 사용됩니다.

module.exports = {
  //...
  output: {
    umdNamedDefine: true,
  },
};

output.uniqueName

string

전역을 사용할 때 여러 webpack 런타임이 충돌하지 않도록하는 webpack 빌드의 고유한 이름입니다. 기본값은 output.library 이름 또는 컨텍스트에서 package.json의 패키지 이름입니다. 둘 다 찾을 수없는 경우 ''으로 설정됩니다.

output.uniqueName은 고유한 전역을 생성하는 데 사용됩니다.

output.chunkLoadingGlobal

webpack.config.js

module.exports = {
  // ...
  output: {
    uniqueName: 'my-package-xyz',
  },
};

output.wasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

WebAssembly 모듈을 로드하는 방법을 설정하는 옵션입니다. 기본적으로 포함된 메소드는 'fetch' (web/WebWorker), 'async-node' (Node.js)이고 다른 것들도 플러그인에 의해 추가될 수 있습니다.

기본값은 다른 target의 영향을 받을 수 있습니다.

target이 'web', 'webworker', 'electron-renderer' 또는 'node-webkit'으로 설정된 경우 기본값은 'fetch'입니다.
target이 'node', 'async-node', 'electron-main' 또는 'electron-preload'로 설정된 경우 기본값은 'async-node'입니다.

module.exports = {
  //...
  output: {
    wasmLoading: 'fetch',
  },
};

output.webassemblyModuleFilename

string = '[hash].module.wasm'

WebAssembly 모듈의 파일 이름을 지정합니다. output.path 디렉토리 내 상대 경로로 제공되어야 합니다.

module.exports = {
  //...
  output: {
    webassemblyModuleFilename: '[id].[hash].wasm',
  },
};

output.workerChunkLoading

string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal' boolean: false

새로운 옵션 workerChunkLoading은 worker의 청크 로드를 제어합니다.

webpack.config.js

module.exports = {
  //...
  output: {
    workerChunkLoading: false,
  },
};

output.workerPublicPath

string

Worker에 대한 공용 경로를 설정합니다. 기본값은 output.publicPath입니다. Worker 스크립트가 다른 경로에 있는 경우에만 이 옵션을 사용하세요.

webpack.config.js

module.exports = {
  //...
  output: {
    workerPublicPath: '/workerPublicPath2/',
  },
};

output.workerWasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

Worker에서 WebAssembly 모듈을 로드하는 방법을 설정하는 옵션이며 기본값은 output.wasmLoading 값입니다.

webpack.config.js

module.exports = {
  //...
  output: {
    workerWasmLoading: 'fetch',
  },
};

Edit this page·Print this page

« Previous

Mode

Module

29 Contributors

Translators

YukJiSoo