Output

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

output.assetModuleFilename

string = '[hash][ext][query]'

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

output.auxiliaryComment

string object

output.libraryoutput.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

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

청크를 로드하는 메소드.(기본적으로 포함된 메소드는 '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.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를 통해 템플릿 문자열에서 사용할 수 있습니다.

TemplateDescription
[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.library입니다. webpack으로 빌드된 여러 라이브러리를 로드할 때 소스맵에서 소스 파일 경로 충돌을 방지하는 경우 사용됩니다.

예를 들어, 네임스페이스가 library1library2인 라이브러리가 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: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: true,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: true,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: true,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: true,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
    },
  },
};

output.filename

string function (pathData, assetInfo) => string

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

단일 entry 지점의 경우 정적인 이름으로 설정할 수 있습니다.

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'와 같이 폴더 구조의 이름을 사용할 수 있습니다.

이 옵션은 온 디맨드 로드되는 청크의 출력 파일에는 영향을 주지 않습니다. 처음에 로드된 출력 파일에만 영향을 줍니다. 온 디맨드 로드 된 청크 파일의 경우 output.chunkFilename 옵션이 사용됩니다. 로더에서 생성된 파일도 영향을 받지 않습니다. 이 경우 특정 로더에서 사용 가능한 옵션의 사용을 시도해봐야 합니다.

Template strings

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

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

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

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

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

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

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

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

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

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

TemplateDescription
[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.futureEmitAssets

boolean = false

webpack에 애셋 방출 로직의 미래 버전을 사용하도록 지시하여 방출 후 애셋의 메모리를 해제할 수 있습니다. 애셋이 방출된 후에도 여전히 읽을 수 있다고 가정하는 플러그인이 손상될 수 있습니다.

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

output.globalObject

string = 'window'

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

예제:

webpack.config.js

module.exports = {
  // ...
  output: {
    library: 'myLib',
    libraryTarget: '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,
  },
};

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

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.importFunctionName

string = 'import'

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

webpack.config.js

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

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 또는 객체 같이 많은 종류의 엔트리 포인트를 받아들일 수 있습니다.

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

    module.exports = {
      // …
      entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed
      output: {
        library: 'MyLibrary',
      },
    };
  2. 객체entry 포인트로 제공되면 libraryarray 구문을 사용하여 모든 항목을 내보낼 수 있습니다.

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

    a.jsb.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.name

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

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

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

output.library.type

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

  • 타입: string

    기본적으로 포함되는 타입은 'var', 'module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', '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.nameoutput.library.type에서 다른 의미를 갖습니다.

type: 'module'
module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // 여기에 `name`을 지정하지 마세요.
      type: '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: 'amd'

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

AMD 모듈은 일반적으로 RequireJS 또는 almond같은 호환 가능한 로더에서 제공하는 definerequire와 같은 특정 속성으로 엔트리 청크(<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.pathoutput.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: {
    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];
  }
})(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.typesystem으로 설정하는 것 외에도 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.umdNamedDefinetrue로 설정하면 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.libraryoutput.libraryTarget에서 다른 의미를 갖습니다.

libraryTarget: 'module'

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

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

libraryTarget: 'commonjs2'

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

module.exports = _entry_return_;

require('MyLibrary').doSomething();

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

libraryTarget: 'amd'

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

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

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

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_;
});

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

libraryTarget: 'amd-require'

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

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

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

libraryTarget: 'umd'

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

이 경우 모듈 이름을 지정하려면 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.libraryTargetsystem으로 설정하는 것 외에도 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.iifefalse로, output.scriptType'module'로, terserOptions.moduletrue로 설정합니다.

다른 사용자가 사용할 라이브러리를 컴파일하기 위해 webpack을 사용하는 경우 output.moduletrue 일 때 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');

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

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

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

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

output.trustedTypes

boolean = false string object

5.37.0+

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

기본값은 false입니다(호환성 없음, 스크립트 URL은 문자열).

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

webpack.config.js

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

output.umdNamedDefine

boolean

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

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

output.uniqueName

string

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

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

webpack.config.js

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

output.wasmLoading

boolean = false 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.workerChunkLoading

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

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

webpack.config.js

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

Translators