Datagrid and Charting for Enterprise Applications

Printable

Configuration

기본적으로 webpack은 설정 파일을 사용할 필요가 없습니다. webpack은 프로젝트의 엔트리 포인트를 src/index.js으로 가정하고, 프로덕션을 위해 압축하고 최적화된 결과를 dist/main.js로 내보냅니다.

보통 프로젝트는 이 기능을 확장해야 합니다. 루트 폴더에 webpack.config.js 파일을 생성하면 webpack이 자동으로 이 파일을 사용합니다.

사용 가능한 모든 설정 옵션을 아래에서 설명하고 있습니다.

Use a different configuration file

특정 상황에 따라 다른 설정 파일을 사용하려면 커맨드라인에서 --config 플래그를 사용하여 이를 변경할 수 있습니다.

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

Set up a new webpack project

Webpack에는 방대한 옵션 세트가 있습니다. 프로젝트 요구사항에 대한 webpack 설정 파일을 빠르게 생성할 수 있는 webpack-cli'의 init 명령어를 활용하세요. 설정 파일을 만들기 전에 몇 가지 질문을 할 것입니다.

npx webpack init

npx는 @webpack-cli/generators가 아직 프로젝트에 설치되지 않았거나 전역으로 설치되지 않은 경우 설치하라는 메시지를 표시 할 수 있습니다. 설정 생성 중에 선택한 사항에 따라 프로젝트에 추가 패키지를 설치할 수도 있습니다.

$ npx webpack init

[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)
devDependencies:
+ @webpack-cli/generators 2.5.0
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: pnpm
[webpack-cli] ℹ INFO  Initialising project...

devDependencies:
+ @babel/core 7.19.3
+ @babel/preset-env 7.19.4
+ autoprefixer 10.4.12
+ babel-loader 8.2.5
+ css-loader 6.7.1
+ html-webpack-plugin 5.5.0
+ mini-css-extract-plugin 2.6.1
+ postcss 8.4.17
+ postcss-loader 7.0.1
+ prettier 2.7.1
+ style-loader 3.3.1
+ webpack-dev-server 4.11.1
[webpack-cli] Project has been initialised with webpack!

Configuration Languages

Webpack은 여러 프로그래밍과 데이터 언어로 작성된 설정 파일을 사용할 수 있습니다. 지원되는 파일 확장자 목록은 node-interpret 패키지에서 확인할 수 있습니다. Webpack은 node-interpret를 사용하여, 다양한 유형의 설정 파일을 처리할 수 있습니다.

TypeScript

TypeScript에서 webpack 설정을 하기 위해서는, 먼저 필요한 디펜던시, 예를들면 TypeScript와 DefinitelyTyped에서 관련있는 타입 정의를 설치해야 합니다.

npm install --save-dev typescript ts-node @types/node @types/webpack
# webpack-dev-server < v4.7.0을 사용하는 경우
npm install --save-dev @types/webpack-dev-server

설치를 마쳤으면, 다음 설정을 작성하세요.

webpack.config.ts

import path from 'path';
import webpack from 'webpack';
// `devServer`를 설정할 때 typescript 오류가 발생하는 경우를 대비하여
import 'webpack-dev-server';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

위 예시는 TypeScript 2.7 이상 버전의 tsconfig.json 파일에서 새로운 esModuleInterop 및 allowSyntheticDefaultImports 컴파일러 옵션과 함께 사용된다고 가정합니다.

tsconfig.json 파일도 확인해야 합니다. 만약 tsconfig.json에서 compilerOptions의 module이 commonjs라면 설정이 완료되지만, 그렇지 않으면 webpack이 에러와 함께 실패하게 됩니다. 이는 ts-node가 commonjs 이외의 다른 모듈 구문은 지원하지 않기 때문입니다.

이 문제는 세 가지 해결 방법이 있습니다.

tsconfig.json을 수정합니다.
tsconfig.json을 수정하고 ts-node를 위한 설정을 추가합니다.
tsconfig-paths를 설치합니다.

첫 번째 방법은 tsconfig.json 파일을 열고 compilerOptions를 찾는것입니다. target을 "ES5"로 하고 module을 "CommonJS"로 설정합니다.(또는 module 옵션을 완전히 제거합니다)

두 번째 방법은 ts-node에 대한 설정을 추가하는 것입니다.

tsc에 대해 "module": "ESNext"를 유지할 수 있으며, webpack 또는 다른 빌드 도구를 사용하는 경우 ts-node에 대한 오버라이드를 설정합니다. ts-node 설정

{
  "compilerOptions": {
    "module": "ESNext"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

세 번째 방법은 tsconfig-paths 패키지를 설치합니다.

npm install --save-dev tsconfig-paths

webpack 설정에 맞게 별도의 TypeScript 설정을 만듭니다.

tsconfig-for-webpack-config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

그런 다음 tsconfig-paths에서 제공하는 환경 변수 process.env.TS_NODE_PROJECT를 다음과 같이 설정합니다.

package.json

{
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }
}

CoffeeScript

마찬가지로, CoffeeScript를 사용하려면 먼저 필요한 디펜던시를 설치해야 합니다.

npm install --save-dev coffeescript

그리고 다음 설정을 작성하세요.

webpack.config.coffee

HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path')

config =
  mode: 'production'
  entry: './path/to/my/entry/file.js'
  output:
    path: path.resolve(__dirname, 'dist')
    filename: 'my-first-webpack.bundle.js'
  module: rules: [ {
    test: /\.(js|jsx)$/
    use: 'babel-loader'
  } ]
  plugins: [
    new HtmlWebpackPlugin(template: './src/index.html')
  ]

module.exports = config

Babel and JSX

아래 예제에서 JSX (React JavaScript Markup) 및 Babel은 webpack이 이해할 수 있는 JSON 설정을 만드는 데 사용됩니다.

Jason Miller 제공

먼저, 필요한 디펜던시를 설치하세요.

npm install --save-dev babel-register jsxobj babel-preset-es2015

.babelrc

{
  "presets": ["es2015"]
}

webpack.config.babel.js

import jsxobj from 'jsxobj';

// import된 plugin의 예시
const CustomPlugin = (config) => ({
  ...config,
  name: 'custom-plugin',
});

export default (
  <webpack target="web" watch mode="production">
    <entry path="src/index.js" />
    <resolve>
      <alias
        {...{
          react: 'preact-compat',
          'react-dom': 'preact-compat',
        }}
      />
    </resolve>
    <plugins>
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
);

Configuration Types

단일 설정 객체를 export 하는 것 외에도 다른 요구 사항을 처리하는 몇 가지 방법이 더 있습니다.

Exporting a Function

webpack.config.js에서 개발환경과 프로덕션 환경을 명확히 해야 합니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 한 가지 옵션은 객체를 내보내는 대신 webpack 설정에서 함수를 내보내는 것입니다. 이 함수는 두 개의 인수로 호출됩니다.

첫 번째 파라미터는 environment입니다. 구문 예제는 CLI 문서의 environment 옵션을 참고하세요.
두 번째 파라미터인 argv는 옵션 map 입니다. output-path, mode와 같은 키를 사용하여 webpack에 전달되는 옵션을 나타냅니다.

-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new TerserPlugin({
         terserOptions: {
+          compress: argv.mode === 'production' // `--mode production`이 통과 된 경우에만
         }
       })
     ]
+  };
};

Exporting a Promise

Webpack은 설정 파일에서 export 한 함수를 실행하고 Promise가 반환될 때까지 기다립니다. 설정에서 사용되는 변수를 비동기적으로 로드해야 할 때 편리합니다.

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      });
    }, 5000);
  });
};

Exporting multiple configurations

단일 설정 객체 또는 함수를 export 하는 대신, 여러 개의 설정을 export 할 수 있습니다(여러 개의 함수는 webpack 3.1.0부터 지원). webpack을 실행할 때, 모든 설정이 빌드됩니다. 예를 들어, AMD나 CommonJS 같은 여러 개의 target을 위한 라이브러리 빌드 시 유용합니다.

module.exports = [
  {
    output: {
      filename: './dist-amd.js',
      libraryTarget: 'amd',
    },
    name: 'amd',
    entry: './app.js',
    mode: 'production',
  },
  {
    output: {
      filename: './dist-commonjs.js',
      libraryTarget: 'commonjs',
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'production',
  },
];

dependencies

다른 설정의 출력에 의존하는 설정이 있는 경우 dependencies 배열을 사용하여 의존성 목록을 지정할 수 있습니다.

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

parallelism

여러 설정을 export하는 경우 설정 배열과 parallelism 옵션을 사용하여 병렬로 컴파일 할 최대 컴파일러 수를 지정할 수 있습니다.

타입: number
지원 버전: 5.22.0+

webpack.config.js

module.exports = [
  {
    //config-1
  },
  {
    //config-2
  },
];
module.exports.parallelism = 1;

Entry and Context

엔트리 객체는 webpack이 번들 빌드를 시작하는 곳입니다. 컨텍스트는 엔트리 파일을 포함하는 디렉터리에 대한 절대 경로입니다.

context

string

설정에서 엔트리 포인트와 로더를 확인하기 위한 절대 경로의 기본 디렉터리.

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};

기본적으로 Node.js의 현재 작업 디렉터리가 사용되지만, 설정에 값을 전달하는 것이 좋습니다. 이렇게 하면 CWD(현재 작업 디렉터리)와 독립적인 설정이 가능합니다.

entry

string [string] object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false })

애플리케이션 번들 처리를 시작할 지점입니다. 배열이 전달되면 배열의 모든 항목이 처리됩니다.

동적으로 로드된 모듈은 엔트리 포인트가 아닙니다.

간단한 규칙: HTML 페이지 당 하나의 엔트리 포인트. SPA: 하나의 엔트리 포인트, MPA: 다중 엔트리 포인트.

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },
};

Naming

문자열 또는 문자열 배열이 전달되면, 청크 이름은 main입니다. 객체가 전달되면, 객체의 키는 청크의 이름이 되고, 객체의 값은 청크의 엔트리 포인트를 설명합니다.

Entry descriptor

객체가 전달되면 객체의 값은 문자열, 문자열 배열 또는 디스크립터가 될 수 있습니다.

module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // 요청 시 로드되는 청크를 비활성화하고 모든 것을 기본 청크에 넣습니다.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // 요청 시 로드되는 비동기 청크 생성
      layer: 'name of layer', // 엔트리 포인트에 대한 레이어 설정
    },
  },
};

디스크립터를 사용하여 추가 옵션을 엔트리 포인트에 전달할 수 있습니다.

Output filename

기본적으로, 엔트리 청크의 출력 파일 이름은 output.filename에서 추출되지만, 특정 엔트리에 대한 커스텀 출력 파일 이름을 지정할 수 있습니다.

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: { import: './contact.js', filename: 'pages/[name].js' },
    about: { import: './about.js', filename: 'pages/[name].js' },
  },
};

여기의 디스크립터는 특정 엔트리 포인트에 filename 옵션을 전달하는 데 사용되었습니다.

Dependencies

기본적으로, 모든 엔트리 청크는 사용하는 모든 모듈을 저장합니다. dependOn 옵션을 사용하면 한 엔트리 청크에서 다른 엔트리 청크로 모듈을 공유할 수 있습니다.

module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

app 청크에는 react-vendors에 있는 모듈이 포함되지 않습니다.

dependOn 옵션은 문자열 배열을 허용합니다.

module.exports = {
  //...
  entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' },
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
    testapp: {
      import: './wwwroot/component/TestApp.tsx',
      dependOn: ['reactvendors', 'moment'],
    },
  },
};

또한, 배열을 사용해서 하나의 엔트리에 여러 개의 파일을 지정할 수 있습니다.

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

Dynamic entry

함수가 전달되면 모든 make 이벤트에서 호출됩니다.

make 이벤트는 webpack이 시작될 때와 파일 변경을 감시 할 때 모든 유효하지 않은 상황에서 호출됩니다.

module.exports = {
  //...
  entry: () => './demo',
};

또는

module.exports = {
  //...
  entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};

예: 외부 소스(원격 서버, 파일 시스템 콘텐츠 또는 데이터베이스)에서 실제 엔트리를 가져오기 위해 동적 엔트리를 사용할 수 있습니다.

webpack.config.js

module.exports = {
  entry() {
    return fetchPathsFromSomeExternalSource(); // ['src/main-layout.js', 'src/admin-layout.js']와 같이 해석할 promise를 반환합니다.
  },
};

output.library 옵션과 결합하는 경우, 배열이 전달되면 마지막 항목만 내보냅니다.

Runtime chunk

Webpack 'v5.43.0' 이후 새로운 런타임 청크를 방지하기 위해 엔트리포인트에 대한 런타임 청크를 설정하고 이를 'false'로 설정할 수 있습니다.

optimization.runtimeChunk를 사용하면 지정되지 않은 엔트리포인트에 대해 전역적으로 설정할 수 있습니다.

module.exports = {
  //...
  entry: {
    home: {
      import: './home.js',
      runtime: 'home-runtime',
    },
    about: {
      import: './about.js',
      runtime: false,
    },
  },
};

Mode

mode 옵션을 사용하면 webpack에 내장된 최적화 기능을 사용할 수 있습니다.

string = 'production': 'none' | 'development' | 'production'

Usage

설정에서 mode 옵션을 사용합니다.

module.exports = {
  mode: 'development',
};

혹은 CLI의 인수로 전달합니다.

webpack --mode=development

지원되는 문자열 값은 다음과 같습니다.

옵션	설명
`development`	`DefinePlugin`의 `process.env.NODE_ENV`를 `development`로 설정합니다. 모듈과 청크에 유용한 이름을 사용할 수 있습니다.
`production`	`DefinePlugin`의 `process.env.NODE_ENV`를 `production`으로 설정합니다. 모듈과 청크, `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `TerserPlugin` 등에 대해 결정적 망글이름(mangled name)을 사용할 수 있습니다.
`none`	기본 최적화 옵션에서 제외

설정되지 않은 경우, webpack은 production을 mode의 기본값으로 설정합니다.

Mode: development

// webpack.development.config.js
module.exports = {
  mode: 'development',
};

Mode: production

// webpack.production.config.js
module.exports = {
  mode: 'production',
};

Mode: none

// webpack.custom.config.js
module.exports = {
  mode: 'none',
};

webpack.config.js 안의 mode 변수에 따라 동작을 변경하려면, 객체 대신 함수를 export 해야 합니다.

var config = {
  entry: './app.js',
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

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',
  },
};

Module

이 옵션은 프로젝트 내에서 다른 유형의 모듈을 처리하는 방법을 결정합니다.

module.defaultRules

모듈에 기본적으로 적용되는 규칙의 배열입니다.

자세한 내용은 소스 코드를 참고하세요.

module.exports = {
  module: {
    defaultRules: [
      '...', // "..."를 사용하여 기본적으로 webpack에 의해 적용되는 규칙을 참조할 수 있습니다.
    ],
  },
};

Webpack 5.87.0부터 0, "", false, null 및 undefined를 포함한 falsy 값을 module.defaultRules로 전달하여 특정 규칙을 조건부로 비활성화할 수 있습니다.

module.exports = {
  module: {
    defaultRules: [
      false &&
        {
          // 이 규칙은 비활성화됩니다.
        },
    ],
  },
};

module.generator

5.12.0+

module.generator를 사용하여 한 곳에서 모든 제너레이터의 옵션을 설정할 수 있습니다.

webpack.config.js

module.exports = {
  module: {
    generator: {
      asset: {
        // asset 모듈 제너레이터 옵션

        // 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
        binary: false,

        // 데이터 URL 제너레이터 옵션입니다.
        dataUrl: {
          // 애셋 인코딩(기본값은 "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
          // type: string
          mimetype: 'image/png',
        },

        // 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
        // type: boolean
        emit: true,

        // 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // asset 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // asset/inline 모듈 제너레이터 옵션

        // 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
        binary: false,

        // 데이터 URL 제너레이터 옵션
        dataUrl: {
          // 애셋 인코딩(기본값은 "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
          // type: string
          mimetype: 'image/png',
        },
      },
      'asset/resource': {
        // asset/resource 모듈 제너레이터 옵션

        // 이 애셋을 바이너리로 처리해야 하는지 여부를 나타냅니다. 대신 텍스트로 처리하려면 'false'로 설정합니다. webpack 5.93.0부터 사용 가능합니다.
        binary: false,

        // 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
        // type: boolean
        emit: true,

        // 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // asset/resource 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      javascript: {
        // 이 모듈 유형에는 아직 제너레이터 옵션이 지원되지 않습니다.
      },
      'javascript/auto': {
        // 위와 동일
      },
      'javascript/dynamic': {
        // 위와 동일
      },
      'javascript/esm': {
        // 위와 동일
      },
      css: {
        // CSS 모듈용 제너레이터 옵션

        // 스타일시트를 생성하고 로드하는 것을 피하고 출력 자바스크립트 파일에 css의 내보내기만 포함합니다.
        // type: boolean, webpack 5.90.0부터 사용 가능합니다.
        exportsOnly: true,

        // CSS 내보내기 이름을 그대로 유지하거나 카멜 케이스로 변환하는 등 javascript 모듈로 내보내는 방법을 사용자 정의합니다.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // webpack 5.90.4부터 사용 가능합니다.
        exportsConvention: 'camel-case-only',
      },
      'css/auto': {
        // CSS/자동 모듈 생성용 옵션

        // 스타일시트를 생성하고 로드하는 것을 피하고 출력 자바스크립트 파일에 css의 내보내기만 포함합니다.
        // type: boolean, webpack 5.90.0부터 사용 가능합니다.
        exportsOnly: true,

        // CSS 내보내기 이름을 그대로 유지하거나 카멜 케이스로 변환하는 등 javascript 모듈로 내보내는 방법을 사용자 정의합니다.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // webpack 5.90.4부터 사용 가능합니다.
        exportsConvention: 'camel-case-only',

        // CSS 모듈에 대해 생성된 로컬 클래스 이름의 형식을 사용자 정의합니다.
        // type: string, https://webpack.js.org/configuration/output/#template-strings의 파일 수준 및 모듈 수준 대체 외에도 [uniqueName] 및 [local]도 포함됩니다.
        // webpack 5.90.4부터 사용 가능합니다.
        localIdentName: '[uniqueName]-[id]-[local]',
      },
      'css/global': {
        // ditto
      },
      'css/module': {
        // ditto
      },
      // 그외 다른 옵션들…
    },
  },
};

module.parser

5.12.0+

module.generator처럼 module.parser를 사용하여 한 곳에서 모든 파서의 옵션을 설정할 수 있습니다.

webpack.config.js

module.exports = {
  module: {
    parser: {
      asset: {
        // asset 모듈 파서 옵션

        // 데이터 URL 제너레이터 옵션입니다.
        dataUrl: {
          // 애셋 인코딩(기본값은 "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // 애셋 Mimetype (기본적으로 파일 확장자에서 가져옵니다).
          // type: string
          mimetype: 'image/png',
        },

        // 이 애셋 모듈에서 출력 애셋을 내보냅니다. 예를 들어 SSR의 경우 내보내기를 생략하려면 'false'로 설정할 수 있습니다.
        // type: boolean
        emit: true,

        // 이 애셋 모듈의 파일 이름을 사용자 정의합니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // asset 모듈을 위한 publicPath 사용자 정의. webpack 5.28.0 이후로 사용 가능.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Webpack 5.67.0부터 사용 가능한 'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다.
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // 이 모듈 유형에는 아직 파서 옵션이 지원되지 않습니다.
      },
      'asset/resource': {
        // 위와 동일
      },
      'asset/source': {
        // 위와 동일
      },
      javascript: {
        // javascript 모듈 파서 옵션
        // 예. require.ensure 구문 파싱 활성화
        requireEnsure: true,
        // 모듈을 '엄격' 또는 '비엄격' 모드로 설정합니다. 엄격 모드와 비엄격 모드 간에 일부 동작이 다르기 때문에 이는 모듈의 동작에 영향을 미칠 수 있습니다.
        overrideStrict: 'non-strict',
      },
      'javascript/auto': {
        // 위와 동일
      },
      'javascript/dynamic': {
        // 위와 동일
      },
      'javascript/esm': {
        // 위와 동일
      },
      css: {
        // CSS 모듈의 파서 옵션

        // Webpack 5.90.0부터 사용할 수 있는 CSS 내보내기를 위해 export라는 이름의 ES 모듈을 사용하세요.
        // type: boolean
        namedExports: true,
      },
      'css/auto': {
        // 위와 동일
      },
      'css/global': {
        // 위와 동일
      },
      'css/module': {
        // 위와 동일
      },
      // 그외 다른 옵션들…
    },
  },
};

module.parser.css.namedExports

이 옵션을 사용하면 CSS 내보내기에 export라는 이름의 ES 모듈을 사용할 수 있습니다. true로 설정하면 CSS 모듈은 이름이 지정된 내보내기를 사용하여 클래스와 스타일을 내보냅니다.

Type: boolean
Available: 5.90.0+

Example:

module.exports = {
  module: {
    parser: {
      css: {
        namedExports: true,
      },
    },
  },
};

CSS 모듈에 대해 namedExports가 false인 경우 다양한 가져오기 방법을 사용하여 CSS 클래스를 검색할 수 있습니다. 이름이 지정된은 내보내기는 개발자 환경(DX)을 개선하기 위해 리디렉션되어 기본 내보내기에서 이름이 지정된 내보내기로 원활하게 전환할 수 있습니다.

import * as styles from './styles.module.css';
import styles1 from './styles.module.css';
import { foo } from './styles.module.css';

console.log(styles.default.foo); // styles.default를 통해 접근
console.log(styles.foo); // styles에서 직접 접근
console.log(styles1.foo); // 기본 가져오기를 통해 styles1에 접근
console.log(foo); // 바로 명명된 이름으로 가져오기

namedExports가 활성화되면(기본 동작) 이름이 지정된 내보내기만 사용하여 CSS 클래스를 가져올 수 있습니다.

/* styles.css */
.header {
  color: blue;
}

.footer {
  color: green;
}

import { header, footer } from './styles.module.css';

namedExports를 활성화하면 JavaScript 프로젝트에서 CSS를 관리하는 데 더 모듈화되고 유지 관리 가능한 접근 방식을 채택하고 ES 모듈 구문을 활용하여 더 명확하고 명시적인 가져오기를 수행할 수 있습니다.

module.parser.javascript

JavaScript 파서를 위한 옵션을 설정할 수 있습니다.

module.exports = {
  module: {
    parser: {
      javascript: {
        // ...
        commonjsMagicComments: true,
      },
    },
  },
};

Rule.parser에서 이러한 옵션을 설정하고 특정 모듈을 대상으로 지정할 수 있습니다.

module.parser.javascript.commonjsMagicComments

CommonJS를 위해 magic comments 지원을 활성화할 수 있습니다.

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

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true,
      },
    },
  },
};

webpackIgnore 주석만 지원됩니다.

const x = require(/* webpackIgnore: true */ 'x');

module.parser.javascript.dynamicImportFetchPriority

동적 import를 위해 전역 fetchPriority를 지정합니다.

타입: 'low' | 'high' | 'auto' | false
가능한 버전: 5.87.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportFetchPriority: 'high',
      },
    },
  },
};

module.parser.javascript.dynamicImportMode

동적 import를 위한 전역 프리로드를 지정합니다.

타입: 'eager' | 'weak' | 'lazy' | 'lazy-once'
가능한 버전: 5.73.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportMode: 'lazy',
      },
    },
  },
};

module.parser.javascript.dynamicImportPrefetch

동적 import를 위한 전역 프리로드를 지정합니다.

타입: number | boolean
가능한 버전: 5.73.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPrefetch: false,
      },
    },
  },
};

module.parser.javascript.dynamicImportPreload

동적 import를 위한 전역 프리로드를 지정합니다.

타입: number | boolean
가능한 버전: 5.73.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPreload: false,
      },
    },
  },
};

module.parser.javascript.exportsPresence

\"import ... from ...\" 와 \"export ... from ...\"에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다.

타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        exportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importExportsPresence

\"import ... from ...\"에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다.

타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        importExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importMeta

import.meta 평가를 활성화 또는 비활성화합니다.

타입: boolean = true
가능한 버전: 5.68.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },
};

module.parser.javascript.importMetaContext

import.meta.webpackContext 평가를 사용하거나 사용하지 않도록 설정합니다.

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

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        importMetaContext: true,
      },
    },
  },
};

module.parser.javascript.overrideStrict

모듈을 '엄격' 또는 '비엄격' 모드로 설정합니다. 엄격 모드와 비엄격 모드 간에 일부 동작이 다르기 때문에 이는 모듈의 동작에 영향을 미칠 수 있습니다.

Type: 'strict' | 'non-strict'
Available: 5.93.0+

Example:

module.exports = {
  module: {
    parser: {
      javascript: {
        overrideStrict: 'non-strict',
      },
    },
  },
};

module.parser.javascript.reexportExportsPresence

\"export ... from ...\"에서 내보내기 이름이 잘못된 경우의 동작을 지정합니다. 이것은 TypeScript에서 타입을 다시 내보낼때 \"export ... from ...\"에서 \"export type ... from ...\"으로 마이그레이션하는 동안 비활성화하는 데 유용합니다.

타입: 'error' | 'warn' | 'auto' | false
가능한 버전: 5.62.0+

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        reexportExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.url

new URL() 구문 파싱을 활성화합니다.

타입: boolean = true | 'relative'

예제:

module.exports = {
  module: {
    parser: {
      javascript: {
        url: false, // `new URL()` 구문 파싱 비활성화
      },
    },
  },
};

module.parser.javascript.url의 'relative' 값은 webpack 5.23.0부터 사용할 수 있습니다. 사용하면 webpack은 new URL() 구문에 대한 상대경로 URL을 생성합니다. 즉, 결과 URL 기준 URL이 포함되지 않습니다.

<!-- 'relative'인 경우 -->
<img src="c43188443804f1b1f534.svg" />

<!-- 'relative'가 아닌 경우 -->
<img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" />

이것은 기준 URL이 서버에의 알려지지 않을 때 SSR(서버 사이드 렌더링)에 유용하며 몇 바이트를 절약할 수 있습니다. 동일하게 유지하기 위해서 클라이언트 빌드에서도 사용해야 합니다.
또한 서버 측 렌더링이 일반적으로 필요한 정적 사이트 생성기, mini-css-plugin 및 html-plugin 등을 위해서도 필요합니다.

module.noParse

RegExp [RegExp] function(resource) string [string]

webpack이 주어진 정규식과 일치하는 파일을 파싱하지 못하도록 합니다. 제외된 파일에는 import, require, define 또는 기타 import 메커니즘의 호출이 없어야 합니다. 이렇게 하면 큰 라이브러리를 무시할 때 빌드 성능을 향상 시킬 수 있습니다.

'noParse'는 모든 'import', 'require', 'define' 등의 호출이 런타임에서 도달할 수 없는 경우 확장을 의도적으로 방지하는 방법으로도 사용할 수 있습니다. 예를 들어 '브라우저' 대상용 프로젝트를 빌드하고 브라우저와 Node.js 모두에 대해 사전 빌드된 타사 라이브러리를 사용할 때, 예를 들면 require('os')와 같은 Node.js의 내장 기능이 필요합니다.

webpack.config.js

module.exports = {
  //...
  module: {
    noParse: /jquery|lodash|src[\\/]vendor[\\/]somelib/,
  },
};

module.exports = {
  //...
  module: {
    noParse: (content) =>
      /jquery|lodash|src[\\/]vendor[\\/]somelib/.test(content),
  },
};

module.unsafeCache

boolean function (module)

모듈 요청에 대한 해석을 캐시합니다. module.unsafeCache에 대한 몇 가지 기본값이 있습니다.

cache가 비활성화되어 있다면 false
cache가 활성화되어 있고 모듈이 node 모듈에서 온 것으로 보인다면 true, 그렇지 않다면 false

webpack.config.js

module.exports = {
  //...
  module: {
    unsafeCache: false,
  },
};

module.rules

(Rule | undefined | null | false | "" | 0 | "...")[]

모듈이 생성 될 때 요청과 일치하는 Rule의 배열입니다. 이러한 규칙은 모듈 생성 방법을 수정할 수 있습니다. 로더를 모듈에 적용시키거나 파서를 수정할 수 있습니다.

Webpack 5.87.0부터 false, undefined, null 및 0과 같은 falsy 값을 사용하여 조건부로 규칙을 비활성화할 수 있습니다.

Rule

object

Rule은 Conditions, Results 그리고 중첩된 Rules 세 부분으로 나눠질 수 있습니다.

Rule Conditions

conditions에 대한 두가지 입력 값이 있습니다.

resource: 요청된 파일의 절대 경로입니다. resolve 규칙에 따라 이미 해석되었습니다.
issuer: resource를 요청한 모듈의 파일에 대한 절대 경로입니다. import하는 위치입니다.

예: app.js 내에서 import './style.css'를 수행할 때, resource는 /path/to/style.css이고 issuer는 /path/to/app.js입니다.

Rule의 test, include, exclude 그리고 resource 프로퍼티가 resource와 일치하고 issuer 프로퍼티가 issuer와 일치합니다.

여러 조건을 사용하는 경우, 모든 조건이 일치해야 합니다.

Rule results

Rule results는 Rule condition이 일치하는 경우에만 사용됩니다.

Rule에는 두 가지 출력 값이 있습니다.

적용된 로더: resource에 적용된 로더의 배열입니다.
파서 옵션: 모듈에 대한 파서를 만드는 데 사용해야하는 옵션 객체입니다.

loader, options, use 프로퍼티는 로더에 영향을 줍니다.

query, loaders 프로퍼티는 호환성을 위해 존재합니다.

enforce 프로퍼티는 일반, 사전 또는 사후 로더인지에 따라서 로더의 범주에 영향을 줍니다.

parser 프로퍼티는 파서 옵션에 영향을 줍니다.

Nested rules

중첩된 rules은 rules, oneOf 프로퍼티에서 지정할 수 있습니다.

이러한 rule은 상위 Rule condition이 일치하는 경우에만 평가됩니다. 각 중첩 rule은 자체적으로 조건을 포함 할 수 있습니다.

평가의 순서는 다음과 같습니다.

상위 rule
rules
oneOf

Rule.assert

종속성의 가져오기 어설션을 일치시키고 어설션 유형에 따라 특정 규칙을 적용할 수 있는 조건입니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        // "assert { type: 'json' }" 어설션을 사용하여 가져오기를 처리합니다.
        assert: { type: 'json' },
        loader: require.resolve('./loader-assert.js'),
      },
    ],
  },
};

index.js

import one from './pkg-1.json' assert { type: 'json' };

이 예에서는 Rule.assert를 사용하여 assert { type: "json" }이라는 어설션과 함께 가져온 모든 모듈에 loader-assert.js를 적용하여 JSON 파일이 올바르게 처리되는지 확인합니다.

Rule.compiler

하위 컴파일러 이름을 일치시킬 수 있는 조건.

webpack.config.js

module.exports = {
  // ...
  name: 'compiler',
  module: {
    rules: [
      {
        test: /a\.js$/,
        compiler: 'compiler', //"컴파일러" 이름과 일치하면 로더가 적용됩니다.
        use: './loader',
      },
      {
        test: /b\.js$/,
        compiler: 'other-compiler', // "컴파일러" 이름과 일치하지 않으므로 로더가 적용되지 않습니다.
        use: './loader',
      },
    ],
  },
};

Rule.enforce

string

가능한 값: 'pre' | 'post'

로더의 범주를 지정합니다. 값이 없으면 일반 로더를 의미합니다.

추가적으로 import/require의 인라인으로 적용된 "인라인 로더"도 있습니다.

모든 로더가 차례로 통과하는 두 단계가 있습니다.

Pitching 단계: 로더의 pitch 메소드는 post, inline, normal, pre 순서로 호출됩니다. 자세한 내용은 Pitching Loader를 참고하세요.
Normal 단계: 로더의 normal 메소드는 pre, normal, inline, post 순서로 호출됩니다. 모듈의 소스 코드에서 변환이 이 단계에서 발생합니다.

모든 일반 로더는 요청에 !를 접두사로 추가하여 생략(재정의) 할 수 있습니다.

모든 일반 및 사전 로더는 요청에 -!를 접두사로 추가하여 생략(재정의) 할 수 있습니다.

모든 일반, 사후 및 사전 로더는 요청에 !!를 접두사로 추가하여 생략(재정의) 할 수 있습니다.

// 일반 로더 비활성화
import { a } from '!./file1.js';

// 사전, 일반 로더 비활성화
import { b } from '-!./file2.js';

// 모든 로더 비활성화
import { c } from '!!./file3.js';

인라인 로더와 ! 접두사는 비표준이므로 사용해서는 안됩니다. 이것들은 로더가 생성한 코드에서 사용할 수 있습니다.

Rule.exclude

조건과 일치하는 모든 모듈을 제외합니다. Rule.exclude 옵션을 사용하면 Rule.resource 옵션을 사용할 수 없습니다. 자세한 내용은 Rule.resource 및 Condition.exclude를 참고하세요.

Rule.include

조건과 일치하는 모든 모듈을 포함합니다. Rule.include 옵션을 사용하면 Rule.resource 옵션을 사용할 수 없습니다. 자세한 내용은 Rule.resource 및 Condition.include를 참고하세요.

Rule.issuer

요청한 모듈과 비교할 Condition입니다. 아래의 예제에서, a.js의 issuer는 index.js 파일의 경로입니다.

index.js

import A from './a.js';

이 옵션은 특정 모듈 또는 모듈 세트의 디펜던시에 로더를 적용하는 데 사용할 수 있습니다.

Rule.issuerLayer

issuer의 계층별로 필터링하고 일치시킬 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        issuerLayer: 'other-layer',
      },
    ],
  },
};

Rule.layer

string

모듈이 배치되어야 하는 계층을 지정합니다. 모듈 그룹은 분할 청크, 통계 또는 엔트리 옵션에서 사용할 수 있는 하나의 레이어로 통합될 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /module-layer-change/,
        layer: 'layer',
      },
    ],
  },
};

Rule.loader

Rule.loader는 Rule.use: [ { loader } ]의 단축어입니다. 자세한 내용은 Rule.use와 UseEntry.loader를 참고하세요.

Rule.loaders

Rule.loaders는 Rule.use의 별칭입니다. 자세한 내용은 Rule.use를 참고하세요.

Rule.mimetype

mimetype을 사용하여 설정 규칙을 데이터 URI에 일치시킬 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        mimetype: 'application/json',
        type: 'json',
      },
    ],
  },
};

application/json, text/javascript, application/javascript, application/node 및 application/wasm은 이미 기본적인 mimetype으로 포함되어 있습니다.

Rule.oneOf

Rule이 일치할 때 첫 번째 일치하는 Rule만 사용되는 Rules의 배열입니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            type: 'asset/inline',
          },
          {
            resourceQuery: /external/, // foo.css?external
            type: 'asset/resource',
          },
        ],
      },
    ],
  },
};

Rule.options / Rule.query

Rule.options과 Rule.query는 Rule.use: [ { options } ]의 단축어입니다. 자세한 내용은 Rule.use와 UseEntry.options을 참고하세요.

Rule.parser

파서 옵션이 있는 객체입니다. 적용된 모든 파서 옵션이 병합됩니다.

파서는 이러한 옵션을 검사하고 그에 따라 자체적으로 비활성화하거나 재구성할 수 있습니다. 대부분의 기본 플러그인은 값을 다음과 같이 해석합니다.

옵션을 false로 설정하면 파서가 비활성화됩니다.
옵션을 true로 설정하거나 undefined로 두면 파서가 활성화됩니다.

그러나, 파서 플러그인은 boolean 이상의 값을 받아들일 수 있습니다. 예를 들면, 내부의 NodeStuffPlugin은 true 대신에 객체를 받아 특정 Rule에 대한 옵션을 추가할 수 있습니다.

예제 (기본 플러그인의 파서 옵션):

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          amd: false, // AMD 비활성화
          commonjs: false, // CommonJS 비활성화
          system: false, // SystemJS 비활성화
          harmony: false, // ES2015 Harmony import/export 비활성화
          requireInclude: false, // require.include 비활성화
          requireEnsure: false, // require.ensure 비활성화
          requireContext: false, // require.context 비활성화
          browserify: false, // Browserify 번들의 특수 처리 비활성화
          requireJs: false, // requirejs.* 비활성화
          node: false, // __dirname, __filename, module, require.extensions, require.main, 등 비활성화
          commonjsMagicComments: false, // CommonJS를 위한 magic comments 지원 비활성화
          node: {}, // 모듈 수준에서 [node](/configuration/node) 계층 재구성
          worker: ['default from web-worker', '...'], // javascript 파일에 대한 WebWorker 처리를 커스터마이즈합니다. "..."는 기본값을 나타냅니다.
        },
      },
    ],
  },
};

Rule.type이 asset이면 Rules.parser 옵션은 파일 내용을 Base64로 인코딩할지 또는 별도의 파일로 출력 디렉터리에 내보낼 지 여부를 나타내는 조건을 설명하는 객체 또는 함수일 수 있습니다.

Rule.type이 asset 또는 asset/inline인 경우 Rule.generator옵션은 모듈 소스의 인코딩을 설명하는 객체이거나 사용자 지정 알고리즘으로 모듈의 소스를 인코딩하는 함수일 수 있습니다.

추가적인 정보나 사용 사례를 위해 애셋 모듈 가이드를 참고하세요.

Rule.parser.dataUrlCondition

object = { maxSize number = 8096 } function (source, { filename, module }) => boolean

모듈 소스 크기가 maxSize보다 작으면 모듈이 Base64 인코딩 문자열로 번들에 삽입되고, 그렇지 않으면 모듈 파일이 출력 디렉터리로 내보내집니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

함수를 dataUrlCondition의 값으로 설정한 경우에는 true를 반환하면 webpack이 모듈을 Base64 인코딩 문자열로 번들에 삽입하도록 지시합니다. 그렇지 않으면 모듈 파일이 출력 디렉터리로 내보내집니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: (source, { filename, module }) => {
            const content = source.toString();
            return content.includes('some marker');
          },
        },
      },
    ],
  },
};

Rule.generator

Rule.generator.dataUrl

object = { encoding string = 'base64' | false, mimetype string = undefined | false } function (content, { filename, module }) => string

Rule.generator.dataUrl이 객체로 사용되면 두개의 프로퍼티를 설정할 수 있습니다.

encoding: 'base64'로 설정하면 모듈 소스는 Base64 알고리즘을 사용하여 인코딩됩니다. encoding을 false로 설정하면 인코딩이 비활성화됩니다.
mimetype: 데이터 URI의 MIME 유형입니다. 기본적으로 모듈 리소스 확장에서 확인합니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        generator: {
          dataUrl: {
            encoding: 'base64',
            mimetype: 'mimetype/png',
          },
        },
      },
    ],
  },
};

함수로 사용하면 모든 모듈에 대해 실행되며 데이터 URI 문자열을 반환해야 합니다.

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        generator: {
          dataUrl: (content) => {
            const svgToMiniDataURI = require('mini-svg-data-uri');
            if (typeof content !== 'string') {
              content = content.toString();
            }
            return svgToMiniDataURI(content);
          },
        },
      },
    ],
  },
};

Rule.generator.emit

애셋 모듈에서 애셋 쓰기를 하지 않는 경우, 서버 사이드 랜더링에서 사용할 수 있습니다.

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

예제:

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          emit: false,
        },
      },
    ],
  },
};

Rule.generator.filename

output.assetModuleFilename과 동일하지만 특정 규칙에 사용됩니다. output.assetModuleFilename을 재정의하고 asset 및 asset/resource 모듈 유형에서만 작동합니다.

webpack.config.js

module.exports = {
  //...
  output: {
    assetModuleFilename: 'images/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource',
      },
      {
        test: /\.html/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext]',
        },
      },
    ],
  },
};

Rule.generator.publicPath

특정 애셋 모듈에 대해 publicPath를 사용자 지정합니다.

타입: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
가능한 버전: 5.28.0+

module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'assets/',
        },
      },
    ],
  },
};

Rule.generator.outputPath

'output.path'를 기준으로 지정된 폴더의 애셋을 내보냅니다. 사용자 지정 'publicPath'가 폴더 구조와 일치하도록 지정된 경우에만 필요합니다.

타입: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
가능한 버전: 5.67.0+

module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'https://cdn/assets/',
          outputPath: 'cdn-assets/',
        },
      },
    ],
  },
};

Rule.resource

리소스와 일치하는 Condition입니다. 자세한 내용은 규칙 조건을 참고하세요.

Rule.resourceQuery

리소스 쿼리와 일치하는 Condition입니다. 이 옵션은 요청 문자열의 쿼리 섹션에 대해 테스트하는 경우 사용됩니다(즉, 물음표부터). import Foo from './foo.css?inline'을 사용하는 경우 다음 조건이 일치합니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        type: 'asset/inline',
      },
    ],
  },
};

Rule.parser.parse

function(input) => string | object

Rule.type이 'json'으로 설정된 경우 Rules.parser.parse옵션은 모듈의 소스를 구문 분석하고 이를 JavaScript 객체로 변환하는 커스텀 로직을 구현하는 함수일 수 있습니다. 특정 로더없이 toml, yaml 및 기타 JSON이 아닌 파일을 JSON으로 가져 오는 것이 유용할 수 있습니다.

webpack.config.js

const toml = require('toml');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.toml/,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
    ],
  },
};

Rule.rules

Rule이 일치 할 때도 사용되는 Rules의 배열입니다.

Rule.sideEffects

bool

모듈의 어떤 부분에 부작용이 있는지 표시하세요. 자세한 내용은 Tree Shaking을 참고하세요.

Rule.test

테스트를 통과하는 모든 모듈을 포함합니다. Rule.test 옵션을 제공하면 Rule.resource도 제공 할 수 없습니다. 자세한 내용은 Rule.resource 및 Condition를 참고하세요.

Rule.type

string

Rule.type은 일치하는 모듈의 유형을 설정합니다. 이는 defaultRules 및 기본값 import 동작이 발생하지 않습니다. 예를 들어 커스텀 로더를 통해 .json파일을 로드하려면 type을 javascript/auto로 설정하여 webpack에 내장된 json import를 우회해야합니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'custom-json-loader',
      },
    ],
  },
};

asset* 유형에 대한 자세한 내용은 애셋 모듈 가이드를 참고하세요.

css/auto

5.87.0+

css/auto 모듈 유형의 사용 사례는 여기를 참고하세요. css/auto를 사용하려면 experiments.css를 활성화해야 합니다.

module.exports = {
  target: 'web',
  mode: 'development',
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: 'less-loader',
        type: 'css/auto',
      },
    ],
  },
};

Rule.use

[UseEntry] function(info)

Webpack 5.87.0부터 undefined null과 같은 falsy 값을 사용하여 조건부로 특정 사용 항목을 비활성화할 수 있습니다.

[UseEntry]

Rule.use는 모듈에 적용되는 UseEntry의 배열일 수 있습니다.

use: [ 'style-loader' ] 같이 string을 전달하는 것은 use: [ { loader: 'style-loader '} ] 같이 loader 프로퍼티에 대한 단축어 입니다.

로더는 여러 로더를 전달하여 연결될 수 있으며, 이는 오른쪽에서 왼쪽으로, 마지막 설정에서 첫 번째 설정 순서로 적용됩니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'less-loader',
            options: {
              noIeCompat: true,
            },
          },
        ],
      },
    ],
  },
};

function(info)

Rule.use는 로드 중인 모듈을 설명하는 객체를 인수로 받는 함수일 수도 있으며 UseEntry를 원소로 가지는 배열을 반환해야 합니다.

info 객체 파라미터는 다음과 같은 필드를 가집니다.

compiler: 현재 webpack 컴파일러 (정의되지 않을 수 있음)
issuer: 로드 중인 모듈을 가져오는 모듈의 경로
realResource: 항상 로드되는 모듈의 경로
resource: 로드되는 모듈의 경로. 요청 문자열의 !=!를 통해 리소스 이름을 덮어 쓰는 경우를 제외하고는 일반적으로 realResource와 같습니다.

반환값에 use: [ 'style-loader' ]같이 배열과 동일한 단축어를 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        use: (info) => [
          {
            loader: 'custom-svg-loader',
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {
                  cleanupIDs: {
                    prefix: basename(info.resource),
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
};

자세한 정보는 UseEntry를 참고하세요.

Rule.resolve

모듈 계층에서 해석에 대한 설정을 할 수 있습니다. 해설 설정 페이지에서 가능한 모든 옵션을 참고하세요. 적용된 모든 해석 옵션은 상위 계층의 해석 옵션과 병합됩니다.

예를 들면, 모듈 계층 해석을 보여주기 위해 ./src/index.js, ./src/footer/default.js 및 ./src/footer/overridden.js 엔트리가 있다고 가정하겠습니다.

./src/index.js

import footer from 'footer';
console.log(footer);

./src/footer/default.js

export default 'default footer';

./src/footer/overridden.js

export default 'overridden footer';

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
};

이 설정으로 번들을 생성하면 console.log(footer)는 'default footer'를 출력합니다. .js파일에 대한 Rule.resolve를 설정하고 footer 별칭을 overridden.js로 설정해보겠습니다.

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
  module: {
    rules: [
      {
        resolve: {
          alias: {
            footer: './footer/overridden.js',
          },
        },
      },
    ],
  },
};

변경된 설정으로 번들을 생성하면 console.log(footer)는 'overridden footer'를 출력합니다.

resolve.fullySpecified

boolean = true

활성화되면 .mjs 파일 또는 다른 .js 파일에서 모듈을 import할 때 가장 가까운 상위 package.json파일에 "type"필드가 "module"을 값으로 가지고 있는 경우 파일 확장자를 제공해야합니다. 그렇지 않으면 webpack이 Module not found 오류와 함께 컴파일에 실패합니다. 그리고 webpack은 resolve.mainFiles에 정의된 파일 이름으로 디렉터리를 확인하지 않으므로 파일 이름을 직접 지정해야합니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false, // 비활성화
        },
      },
    ],
  },
};

Rule.with

v5.92.0+

with 키워드로 제공된 특정 조건에 따라 가져오기를 일치시킬 수 있는 조건을 통해 콘텐츠 유형에 따라 다른 규칙을 적용할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        // "with { type: 'json' }" 조건으로 가져오기를 처리합니다.
        with: { type: 'json' },
        loader: require.resolve('./loader-assert.js'),
      },
    ],
  },
};

index.js

import one from './pkg-1.json' with { type: 'json' };

이 예에서 Rule.with는 with { type: "json" } 조건으로 가져온 모든 모듈에 loader-assert.js를 적용하는 데 사용됩니다.

Condition

Condition은 아래 항목중의 하나가 됩니다.

문자열: 입력을 일치시키려면 제공된 문자열로 시작해야 합니다. 예를 들면, 절대 디렉터리 경로 또는 파일의 절대 경로입니다.
정규표현식: 입력을 검사합니다.
함수: 입력과 함께 호출되며 일치하려면 참과 같은 값을 반환해야 합니다.
Condition 배열: Condition 중 하나 이상이 일치해야 합니다.
객체: 모든 프로퍼티가 일치해야 합니다. 각 속성에는 정의 된 동작이 있습니다.

{ and: [Condition] }: 모든 Condition이 일치해야 합니다.

{ or: [Condition] }: 어떤 Condition이든 일치하면 됩니다.

{ not: [Condition] }: 모든 Condition이 일치하면 안 됩니다.

Example:

const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          // `app/styles`로 시작하는 현재 디렉터리와 관련된 모든 경로를 포함합니다.
          // 예. `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
          path.resolve(__dirname, 'app/styles'),
          // `vendor/styles/` 디렉터리의 내용만 포함하도록 슬래시를 추가합니다.
          path.join(__dirname, 'vendor/styles/'),
        ],
      },
    ],
  },
};

UseEntry

object function(info)

object

문자열인 loader 프로퍼티가 있어야 합니다. 로더 해석 옵션(resolveLoader)을 사용하여 설정 context에 상대적으로 해석됩니다.

options 프로퍼티는 문자열이나 객체가 될 수 있습니다. 이 값은 로더에 전달되며 로더 옵션으로 해석되어야 합니다.

호환성을 위해 options 프로퍼티의 별칭인 query 속성도 가능합니다. options 프로퍼티를 사용하는 것을 권장합니다.

webpack은 옵션을 포함한 모든 로더와 리소스에서 고유한 모듈 식별자를 생성해야합니다. 옵션 객체의 JSON.stringify로 이를 시도합니다. 99.9%의 경우에 문제가 없지만 리소스에 다른 옵션이 있는 동일한 로더를 적용하고 옵션에 동일한 문자열 값이 있는 경우 고유하지 않을 수 있습니다.

순환 JSON 같은 옵션 객체를 문자열화 할 수 없는 경우에도 중단됩니다. 이를 해결하기 위해 고유 식별자로 사용되는 옵션 객체에서 ident 속성을 가질 수 있습니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};

function(info)

UseEntry는 로드되는 모듈을 나타내는 객체를 인수로 받는 함수일 수도 있으며 함수가 아닌 UseEntry 객체를 반환해야 합니다.

info 객체 파라미터에는 다음과 같은 필드가 있습니다.

compiler: 현재 webpack 컴파일러 (정의되지 않을 수 있음)
issuer: 로드 중인 모듈을 가져오는 모듈의 경로
realResource: 항상 로드되는 모듈의 경로
resource: 로드되는 모듈의 경로. 요청 문자열의 !=!를 통해 리소스 이름을 덮어 쓰는 경우를 제외하고는 일반적으로 realResource와 같습니다.

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        use: (info) => ({
          loader: 'svgo-loader',
          options: {
            plugins: [
              {
                cleanupIDs: { prefix: basename(info.resource) },
              },
            ],
          },
        }),
      },
    ],
  },
};

Module Contexts

이 옵션은 동적 종속성이 발생할 때 생성되는 컨텍스트의 기본 설정을 설명합니다.

unknown 동적 종속성 의 예시: require.

expr 동적 종속성 의 예시: require(expr).

wrapped 동적 종속성 의 예시: require('./templates/' + expr).

다음은 기본값으로 사용 가능한 옵션입니다.

webpack.config.js

module.exports = {
  //...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: '.',
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: '.',
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false,
  },
};

다음은 몇 가지 사용 사례입니다.

동적 종속성에 대한 경고(wrappedContextCritical: true)
require(expr)는 전체 디렉터리를 포함해야합니다(exprContextRegExp: /^\.\//).
require('./templates/' + expr)은 기본적으로 하위 디렉터리를 포함하지 않아야 합니다(wrappedContextRecursive: false).
strictExportPresence는 export가 누락되면 경고 대신 오류를 발생시킵니다.
부분적 동적 종속성에 대한 내부 정규식 설정(wrappedContextRegExp: /\\.\\*/)

Resolve

이 옵션은 모듈을 해석하는 방식을 변경 할 수 있습니다. webpack은 알맞은 기본값을 제공하지만, 상세하게 해석 방식을 변경할 수 있습니다. 리졸버의 동작 방식에 대한 자세한 설명은 Module Resolution을 참고하세요.

resolve

object

모듈 해석에 대한 설정. 예를 들어 ES2015에서 import 'lodash'를 호출할 때, resolve 옵션은 webpack이 'lodash'를 찾는 위치를 변경할 수 있습니다. (modules를 참고하세요).

webpack.config.js

module.exports = {
  //...
  resolve: {
    // 설정 옵션
  },
};

resolve.alias

object

import나 require로 간단히 특정 모듈의 별칭을 만들 수 있습니다. 예를 들어, 일반적으로 사용되는 src/ 폴더의 별칭을 지정할 수 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

이제 상대 경로를 사용하는 대신 다음과 같이 사용할 수 있습니다.

import Utility from '../../utilities/utility';

별칭을 사용할 수 있습니다.

import Utility from 'Utilities/utility';

뒤에 $를 객체의 키에 추가하여 정확하게 일치하도록 할 수 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js'),
    },
  },
};

결과는 다음과 같습니다.

import Test1 from 'xyz'; // 정확한 매칭이므로 path/to/file.js로 해석되어 가져옵니다.
import Test2 from 'xyz/file.js'; // 정확한 매칭이 아니고 일반적인 방식으로 가져옵니다.

다음 표는 다른 사례들을 보여줍니다.

`alias:`	`import 'xyz'`	`import 'xyz/file.js'`
`{}`	`/abc/node_modules/xyz/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: '/abc/path/to/file.js' }`	`/abc/path/to/file.js`	error
`{ xyz$: '/abc/path/to/file.js' }`	`/abc/path/to/file.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: './dir/file.js' }`	`/abc/dir/file.js`	error
`{ xyz$: './dir/file.js' }`	`/abc/dir/file.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: '/some/dir' }`	`/some/dir/index.js`	`/some/dir/file.js`
`{ xyz$: '/some/dir' }`	`/some/dir/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: './dir' }`	`/abc/dir/index.js`	`/abc/dir/file.js`
`{ xyz: 'modu' }`	`/abc/node_modules/modu/index.js`	`/abc/node_modules/modu/file.js`
`{ xyz$: 'modu' }`	`/abc/node_modules/modu/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: 'modu/some/file.js' }`	`/abc/node_modules/modu/some/file.js`	error
`{ xyz: 'modu/dir' }`	`/abc/node_modules/modu/dir/index.js`	`/abc/node_modules/modu/dir/file.js`
`{ xyz$: 'modu/dir' }`	`/abc/node_modules/modu/dir/index.js`	`/abc/node_modules/xyz/file.js`

index.js가 package.json에 정의되어 있으면 다른 파일로 해석될 수 있습니다.

/abc/node_modules는 /node_modules로 해석될 수 있습니다.

module.exports = {
  //...
  resolve: {
    alias: {
      _: [
        path.resolve(__dirname, 'src/utilities/'),
        path.resolve(__dirname, 'src/templates/'),
      ],
    },
  },
};

resolve.alias를 false로 설정하면 webpack은 모듈을 무시합니다.

module.exports = {
  //...
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
};

resolve.aliasFields

[string]: ['browser']

예를 들면 browser 같이 구문을 분석할 필드를 지정합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser'],
  },
};

resolve.byDependency

모듈 요청의 유형별로 해석 옵션이 설정됩니다.

Type: [type: string]: ResolveOptions

Example:

module.exports = {
  // ...
  resolve: {
    byDependency: {
      // ...
      esm: {
        mainFields: ['browser', 'module'],
      },
      commonjs: {
        aliasFields: ['browser'],
      },
      url: {
        preferRelative: true,
      },
    },
  },
};

resolve.cache

boolean

성공적으로 해결된 요청을 캐싱하여 캐시 항목의 유효성을 다시 검사할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cache: true,
  },
};

resolve.cachePredicate

function(module) => boolean

요청을 캐시할 지 여부를 결정하는 함수입니다. 객체는 path와 request 속성을 사용하여 함수로 전달합니다. 반드시 boolean을 반환해야 합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cachePredicate: (module) => {
      // 추가 로직
      return true;
    },
  },
};

resolve.cacheWithContext

boolean

안전하지 않은 캐시가 활성화되었을 경우에는 캐시키에 request.context를 포함합니다. 이 옵션은 enhanced-resolve 모듈에서 고려됩니다. resolve 또는 resolveLoader 플러그인이 제공되면 캐싱을 해석하는 컨텍스트가 무시됩니다. 이것은 성능 문제를 해결합니다.

resolve.conditionNames

string[]

패키지의 엔트리 포인트를 정의하는 exports 필드의 조건 이름입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

Webpack은 resolve.conditionNames 배열 내에 나열된 export 조건과 일치합니다.

exports 필드의 키 순서는 중요합니다. 조건 일치 시 이전 항목이 더 높은 우선 순위를 가지며 이후 항목보다 우선합니다.

예를들면 다음과 같습니다.

package.json

{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

importing

'foo'는 'foo/index-require.js'로 해석됩니다.
'foo/bar'는 "node" 키가 조건부 export 객체의 "require"키보다 앞에 오기 때문에 'foo/bar-node.js'로 해석됩니다.
'foo/baz'는 'foo/baz-node.js'로 해석됩니다.

resolve.descriptionFiles

[string] = ['package.json']

설명에 사용할 JSON 파일입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    descriptionFiles: ['package.json'],
  },
};

resolve.enforceExtension

boolean = false

true이면, 확장자가 없는 파일을 허용하지 않습니다. 기본적으로 require('./foo')는 ./foo가 .js 확장자를 가지고 있으면 동작하지만, 이 기능을 사용하면 require('./foo.js')만 동작합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
  },
};

resolve.exportsFields

[string] = ['exports']

요청된 모듈을 해석하는데 사용되는 package.json 필드입니다. 자세한 내용은 package-exports guideline를 참고하세요.

webpack.config.js

module.exports = {
  //...
  resolve: {
    exportsFields: ['exports', 'myCompanyExports'],
  },
};

resolve.extensionAlias

object

확장자를 확장자 별칭에 매핑하는 객체입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

[string] = ['.js', '.json', '.wasm']

이러한 확장자를 순서대로 해석합니다. 여러 파일에서 이름이 동일하지만 다른 확장자를 가진 경우, webpack은 배열의 앞에서부터 파일을 해석하고 남은 것은 해석하지 않습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

이는 사용자가 import 할 때 확장자를 생략 할 수 있도록 합니다.

import File from '../path/to/file';

위와 같이 resolve.extensions를 사용하면 기본 배열을 재정의 할 수 있으며, 이는 webpack이 더 이상 기본 확장자를 사용하여 모듈을 해석하지 않습니다. 하지만 '...' 을 이용하여 기본 확장자에 접근 할 수 있습니다.

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

resolve.fallback

object

정상적인 확인이 실패하면 모듈 요청을 리디렉션합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    fallback: {
      abc: false, // abc에 대한 폴리필을 포함하지 않습니다.
      xyz: path.resolve(__dirname, 'path/to/file.js'), // xyz에 대한 폴리필을 포함합니다.
    },
  },
};

Webpack 5는 더 이상 Node.js의 핵심 모듈을 자동으로 폴리필하지 않습니다. 즉, 브라우저 등에서 실행되는 코드에서 사용하는 경우 npm에서 호환되는 모듈을 설치하고 직접 포함해야 합니다. 다음은 webpack 5 이전에 사용한 폴리필 목록입니다.

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

resolve.fullySpecified

boolean

이 옵션을 true로 설정하면 사용자가 지정한 요청을 완전히 지정한 것으로 취급합니다. 즉, 확장자가 자동으로 추가되지 않고 디렉터리 내의 mainFiles도 해석되지 않습니다. 이 동작은 mainFields, aliasFields 또는 aliases를 통해 이루어진 요청에 영향을 미치지 않습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    fullySpecified: true,
  },
};

resolve.importsFields

[string]

패키지의 내부 요청에 사용되는 package.json 필드입니다. (#으로 시작하는 요청은 내부로 간주됩니다).

webpack.config.js

module.exports = {
  //...
  resolve: {
    importsFields: ['browser', 'module', 'main'],
  },
};

resolve.mainFields

[string]

import * as D3 from 'd3'와 같이 npm 패키지를 가져올 때 이 옵션은 package.json의 어떤 필드를 검사할 지 결정합니다. 기본값은 webpack 설정에 지정된 target에 따라 달라집니다.

target 속성을 webworker, web이나 설정하지 않은 경우는 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

다른 target의 경우(node포함)

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'],
  },
};

예를 들어 다음 필드가 포함된 package.json에 있는 upstream이라는 임의의 라이브러리를 고려해보세요.

{
  "browser": "build/upstream.js",
  "module": "index"
}

import * as Upstream from 'upstream'을 실행하면 실제로 browser 속성의 파일로 해석됩니다. browser 속성은 mainFields의 첫 번째 항목이기 때문에 우선하여 해석합니다. 한편, webpack에 의해 번들된 Node.js 애플리케이션은 먼저 module 필드의 파일을 사용하여 해석하려고 시도합니다.

resolve.mainFiles

[string] = ['index']

디렉터리를 해석하는 동안 사용할 파일 이름입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

resolve.modules

[string] = ['node_modules']

모듈을 해석할 때 검색할 디렉터리를 webpack에 알려줍니다.

절대 경로와 상대 경로를 모두 사용하지만, 약간 다르게 동작 할 수 있습니다.

상대 경로는 Node가 현재 디렉터리와 상위 디렉터리를 통해 node_modules를 검색하는 방법과 유사하게 검색됩니다.

절대 경로는 오직 주어진 디렉터리에서만 검색합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
  },
};

node_modules/보다 우선으로 검색할 디렉터리를 추가하는 것은 다음과 같습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

resolve.plugins

[Plugin]

추가로 해석할 플러그인 리스트를 적용해야 합니다. DirectoryNamedWebpackPlugin과 같은 플러그인을 허용합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    plugins: [new DirectoryNamedWebpackPlugin()],
  },
};

resolve.preferAbsolute

boolean

5.13.0+

해석할 때 resolve.roots보다 절대 경로를 선호합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.preferRelative

boolean

이 옵션을 활성화하면, webpack은 node_modules 디렉터리의 모듈을 사용하는 대신 상대적인 요청으로 해석하려 합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// `src/logo.svg`가 존재한다고 가정해 보세요.
import logo1 from 'logo.svg'; // 이것은 `preferRelative`가 활성화되었을 때 가능합니다
import logo2 from './logo.svg'; // 그렇지 않으면 상대 경로만 사용하여 logo.svg를 해석할 수 있습니다

// `preferRelative` 는 `new URL()` 경우 기본으로 활성화됩니다.
const b = new URL('module/path', import.meta.url);
const a = new URL('./module/path', import.meta.url);

resolve.restrictions

[string, RegExp]

요청을 해석할 수 있는 경로를 제한하는 해석 제한 목록입니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

[string]

서버 관련 URL('/'로 시작하는) 요청이 해석된 디렉터리의 목록으로, 설정 옵션은 context가 기본값입니다. Window가 아닌 시스템에서 이런 요청은 절대 경로로 먼저 해석합니다.

webpack.config.js

const fixtures = path.resolve(__dirname, 'fixtures');
module.exports = {
  //...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.symlinks

boolean = true

심볼릭 링크를 심볼릭 링크된 위치로 해석할지 여부입니다.

활성화되면 심볼릭 링크된 리소스는 심볼릭 링크된 위치가 아닌 실제 경로에서 해석합니다. npm link와 같이 패키지를 심볼릭 링크하는 툴로 사용할 때, 모듈 해석이 실패할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    symlinks: true,
  },
};

resolve.unsafeCache

object boolean = true

공격적이지만 안전하지 않은 모듈 캐싱을 활성화합니다. true로 설정하면 모든 것이 캐싱 됩니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: true,
  },
};

객체가 제공되면 webpack은 이를 캐시로 사용합니다.

예를 들면 일반 객체 대신 프록시 객체를 제공할 수 있습니다.

webpack.config.js

// 여기 토론에서 복사했습니다 https://github.com/webpack/webpack/discussions/18089
const realUnsafeCache = {};
const unsafeCacheHandler = {
  get(cache, key) {
    const cachedValue = cache[key];

    // 파일이 디스크에 있는지 확인하세요
    if (cachedValue && !fs.existsSync(cachedValue.path)) {
      // 그렇지 않은 경우 해당 캐시 항목을 제거합니다.
      delete cache[key];
      return undefined;
    }

    return cachedValue;
  },
};
const theProxiedCache = new Proxy(realUnsafeCache, unsafeCacheHandler);
module.exports = {
  //...
  resolve: {
    unsafeCache: theProxiedCache,
  },
};

resolve.useSyncFileSystemCalls

boolean

리졸버에 대한 동기 파일 시스템 호출을 사용합니다.

webpack.config.js

module.exports = {
  //...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolveLoader

object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}

이 옵션들은 위에 설정된 resolve 속성과 동일하지만, webpack의 loader 패키지를 해석하는데만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};

Optimization

Webpack은 선택된 모드에 따라 최적화를 실행하기 때문에, 여전히 모든 최적화는 수동 구성 및 재정의에 사용할 수 있습니다.

optimization.checkWasmTypes

boolean

WebAssembly 모듈을 가져오거나 내보낼 때 호환되지 않는 유형의 WebAssembly 모듈을 확인하도록 webpack에 지시합니다. 기본적으로 optimization.checkWasmTypes는 프로덕션모드에서 활성화되고 그 외의 경우에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

boolean = false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'

청크 ID를 선택할 때 사용할 알고리즘을 결정합니다. optimization.chunkIds를 false로 설정하면, 플러그인을 통해 사용자 정의 알고리즘이 제공될 수 있으므로 내장 알고리즘을 사용해서는 안 된다고 webpack에 알립니다. optimization.chunkIds에 대한 몇 가지 기본값이 있습니다.

또한 개발 환경인 경우 optimization.chunkIds는 'named'로 설정되고 프로덕션 환경에서는 'deterministic'으로 설정됩니다.
위의 어느 것도 해당하지 않으면 optimization.chunkIds는 'natural'로 기본 설정됩니다.

다음 문자열 값이 지원됩니다.

옵션	설명
`'natural'`	사용 순서에 따른 숫자 ID입니다.
`'named'`	디버깅을 위한 식별 가능한 ID입니다.
`'deterministic'`	컴파일 간에 변경되지 않는 짧은 숫자 ID입니다. 장기 캐싱에 유용합니다. 프로덕션 모드에서 기본으로 활성화됩니다.
`'size'`	최소 초기 다운로드 크기에 초점을 맞춘 숫자 ID입니다.
`'total-size'`	최소 전체 다운로드 크기에 초점을 맞춘 숫자 ID입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: 'named',
  },
};

기본적으로 optimization.chunkIds가 'deterministic'으로 설정된 경우 최소 3자리 숫자가 사용됩니다. 기본 동작을 오버라이드하려면 optimization.chunkIds를 false로 설정하고 webpack.ids.DeterministicChunkIdsPlugin을 사용하세요.

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicChunkIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.concatenateModules

boolean

단일 모듈로 안전하게 연결할 수 있는 모듈 그래프의 세그먼트를 찾습니다. optimization.providedExports 및 optimization.usedExports에 의존합니다. 기본적으로 optimization.concatenateModules는 production mode에서 활성화되고 그 외에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean = false

컴파일 중 오류가 발생할 때마다 애셋을 내보내려면 optimization.emitOnErrors를 사용하세요. 이렇게 하면 오류가 있는 애셋이 방출됩니다. 심각한 오류는 생성된 코드로 내보내지고 런타임에 오류를 발생시킵니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    emitOnErrors: true,
  },
};

optimization.avoidEntryIife

boolean = false

5.95.0+

optimization.avoidEntryIife를 사용하면 엔트리 모듈이 필요할 때 IIFE로 감싸지는 것을 피할 수 있습니다(JavascriptModulesPlugin에서 "This entry needs to be wrap in an IIFE because"를 검색하세요). 이 접근 방식은 JavaScript 엔진의 성능을 최적화하는 데 도움이 되며 ESM 라이브러리를 빌드할 때 트리 쉐이킹을 가능하게 합니다.

현재 optimization.avoidEntryIife는 다른 모듈과 함께 단일 항목 모듈만 최적화할 수 있습니다.

기본적으로 optimization.avoidEntryIife는 production 모드에서 활성화되고 그렇지 않으면 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    avoidEntryIife: true,
  },
};

optimization.flagIncludedChunks

boolean

더 큰 청크가 이미 로드된 경우, 다른 청크의 하위집합인 청크를 확인하고 하위집합을 로드하지 않는 방식으로 플래그를 지정합니다. 기본적으로 optimization.flagIncludedChunks는 production mode에서 활성화되고 그 외에는 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean = true

optimization.innerGraph는 사용되지 않은 export에 대해 내부 그래프 분석을 수행할지를 결정합니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExports를 사용하면 export 맹글링을 제어할 수 있습니다.

기본적으로 optimization.mangleExports: 'deterministic'은 production mode에서 활성화되고 그 외에는 비활성화됩니다.

다음 값이 지원됩니다.

옵션	설명
`'size'`	짧은 이름(보통 단일 문자). 최소 다운로드 사이즈에 초점을 맞춥니다.
`'deterministic'`	짧은 이름(보통 두 개의 문자). export를 추가하거나 제거할 때도 변경되지 않습니다. 장기 캐싱에 유용합니다.
`true`	`'deterministic'`과 동일합니다.
`false`	원래 이름을 유지합니다. 가독성과 디버깅에 유용합니다

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

true로 설정하면 import를 짧은 문자열로 변경하여 WASM 크기를 줄입니다. 모듈 및 export 이름이 맹글됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

동일한 모듈을 포함하는 청크를 병합합니다. optimization.mergeDuplicateChunks를 false로 설정하면 이 최적화가 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean = true

TerserPlugin 또는 optimization.minimizer에 지정된 플러그인을 사용하여 번들을 최소화합니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[TerserPlugin] 또는 [function (compiler)] 또는 undefined | null | 0 | false | ""

하나 이상의 다른 TerserPlugin 인스턴스를 제공하여 기본 최소화 도구를 다시 설정할 수 있습니다. Webpack 5.87.0 부터는 falsy 값을 사용하여 특정 최소화 도구를 조건부로 비활성화할 수 있습니다.

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
  },
};

또는 함수로 제공할 수 있습니다.

module.exports = {
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
          /* 당신의 설정 */
        }).apply(compiler);
      },
    ],
  },
};

기본적으로 webpack은 optimization.minimizer를 다음 값으로 설정합니다.

[
  {
    apply: (compiler) => {
      // Lazy load the Terser plugin
      const TerserPlugin = require('terser-webpack-plugin');
      new TerserPlugin({
        terserOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
]; // eslint-disable-line

optimization.minimizer를 사용자 정의할 때 기본 값을 유지하려는 경우 '...'로 접근할 수 있습니다.

module.exports = {
  optimization: {
    minimizer: [new CssMinimizer(), '...'],
  },
};

기본적으로, '...'은 기본 설정값에 접근하는 지름길 입니다. 그렇지 않으면 webpack이 우리를 위해 설정합니다.

optimization.moduleIds

boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'

모듈 ID를 선택할 때 사용할 알고리즘을 결정합니다. optimization.moduleIds를 false로 설정하면, 플러그인을 통해 사용자 정의 알고리즘이 제공될 수 있으므로 내장 알고리즘을 사용해서는 안 된다고 webpack에 알립니다.

다음 문자열 값이 지원됩니다.

옵션	설명
`natural`	사용 순서에 따른 숫자 ID입니다.
`named`	디버깅을 위한 식별 가능한 ID입니다.
`deterministic`	모듈 이름을 작은 숫자 값으로 해시합니다.
`size`	최소 초기 다운로드 크기에 초점을 맞춘 숫자 ID입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: 'deterministic',
  },
};

deterministic 옵션은 장기 캐싱에 유용하지만 hashed 옵션에 비해 더 작은 번들을 생성합니다. 숫자 값의 길이는 ID 스페이스의 최대 80%를 채우게 됩니다. optimization.moduleIds가 deterministic으로 설정된 경우 기본적으로 최소 3자리 숫자가 사용됩니다. 기본 동작을 오버라이드하려면 optimization.moduleIds를 false로 설정하고 webpack.ids.DeterministicModuleIdsPlugin을 사용하세요.

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicModuleIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.nodeEnv

boolean = false string

webpack이 process.env.NODE_ENV를 주어진 문자열 값으로 설정하도록 합니다. optimization.nodeEnv를 false로 설정하지 않는 한 DefinePlugin을 사용합니다. 만약 mode가 설정되었다면 optimization.nodeEnv는 그 값을 기본으로 사용하고, 그렇지 않으면 'production'으로 폴백합니다.

사용 가능한 값은 아래와 같습니다.

모든 문자열: process.env.NODE_ENV를 설정하는 값입니다.
false: process.env.NODE_ENV값을 수정하거나 설정하지 않습니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.portableRecords

boolean

optimization.portableRecords는 컨텍스트 폴더를 이동할 수 있도록 상대 경로가 있는 레코드를 생성하도록 합니다.

기본적으로 optimization.portableRecords는 비활성화되어 있습니다. 다음 레코드 옵션중 하나라도 webpack 설정에 제공되면 자동으로 활성화됩니다. recordsPath, recordsInputPath, recordsOutputPath.

webpack.config.js

module.exports = {
  //...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

export * from ...에서 보다 효율적인 코드를 생성하기 위해 모듈에서 어떤 export가 제공되는지 파악합니다. 기본적으로 optimization.providedExports가 활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

애셋이 처리된 후 올바른 애셋 콘텐츠 해시를 얻기 위해 추가 해시 컴파일 패스를 추가합니다. realContentHash를 false로 설정하면 내부 데이터를 사용하여 해시를 산출하며 이는 애셋이 동일한 경우 변경될 수 있습니다. 기본적으로 optimization.realContentHash는 프로덕션 모드에서 활성화되고 그렇지 않으면 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

모듈이 이미 모든 상위에 포함되어있는 경우 청크에서 해당 모듈을 감지하고 제거합니다. optimization.removeAvailableModules를 true로 설정하면 이 최적화가 활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

빈 청크를 감지하고 제거합니다. optimization.removeEmptyChunks를 false로 설정하면 이 최적화가 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

optimization.runtimeChunk를 true 또는 'multiple'로 설정하면 런타임만 포함된 추가 청크가 각 엔트리 포인트에 추가됩니다. 이 설정은 다음에 대한 별칭입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

이 대신 'single'값을 설정하면 생성된 모든 청크에서 공유할 런타임 파일을 생성합니다. 이 설정은 다음에 대한 별칭입니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },
};

optimization.runtimeChunk를 object로 설정하면 런타임 청크의 이름 또는 이름 팩토리를 나타내는 name 속성만 제공 할 수 있습니다.

기본값은 false입니다. 각 엔트리 청크에는 런타임이 포함됩니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    },
  },
};

optimization.sideEffects

boolean = true string: 'flag'

package.json의 sideEffects 플래그를 인식합니다. 또는 사이드 이펙트 없음으로 플래그 된 모듈은 export가 사용되지 않을 때 건너뛰도록 합니다.

package.json

{
  "name": "awesome npm module",
  "version": "1.0.0",
  "sideEffects": false
}

optimization.sideEffects는 optimization.providedExports 활성화에 의존합니다. 이 디펜던시는 빌드 시간 비용이 들지만, 모듈을 제거하면 코드 생성이 적기 때문에 성능에 긍정적인 영향을 미칩니다. 이 최적화의 효과는 코드 베이스에 따라 다르므로 가능한 성능 향상을 위해 시도해보세요.

webpack.config.js

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

수동 플래그만 사용하고 소스 코드를 분석하지 않으려면 아래와 같이 사용하세요.

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

'flag'값은 비 프로덕션 빌드에서 기본적으로 사용됩니다.

optimization.splitChunks

object

webpack v4+에서는 동적으로 가져온 모듈에 새로운 공통 청크 전략을 바로 사용할 수 있습니다. SplitChunksPlugin 페이지에서 이 동작을 설정할 때 사용 가능한 옵션을 확인해보세요.

optimization.usedExports

boolean = true string: 'global'

각 모듈에서 사용된 export를 확인합니다. 이는 optimization.providedExports에 의존합니다. optimization.usedExports에 의해 수집된 정보는 다른 최적화 또는 코드 생성에 사용됩니다. 즉, 사용하지 않은 export는 생성되지 않으며, 모든 사용이 호환되는 경우 export 이름이 단일 식별자로 변경됩니다. 최소화 도구로 데드 코드 제거 시 이로 인해 사용하지 않은 export를 제거 할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

런타임 당 사용된 export 분석에서 제외하려면 아래와 같이 사용하세요.

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

Plugins

plugins 옵션은 다양한 방법으로 webpack 빌드 프로세스를 사용자 정의하는 데 사용됩니다. Webpack은 사용 가능한 다양한 내장 플러그인을 webpack.[plugin-name]으로 제공합니다. 플러그인 및 문서 목록은 Plugins 페이지를 참고하세요. 커뮤니티에는 더 많은 내용이 있습니다.

plugins

[Plugin]

webpack 플러그인의 배열입니다. 예를 들어 DefinePlugin을 사용하면 컴파일 때에 구성 가능한 전역 상수를 만들 수 있습니다. 이는 개발 빌드와 릴리스 빌드 간에 서로 다른 동작을 허용하는 데 유용합니다. Webpack 5.87.0 부터는 falsy 값을 사용하여 특정 플러그인을 조건부로 비활성화할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  plugins: [
    new webpack.DefinePlugin({
      // Definitions...
    }),
    false && new webpack.IgnorePlugin(), // 조건부 비활성화
  ],
};

여러 플러그인을 사용하는 더 복잡한 예는 다음과 같습니다.

webpack.config.js

var webpack = require('webpack');
// webpack에 기본적으로 제공되지 않는 플러그인을 import
var DashboardPlugin = require('webpack-dashboard/plugin');

// 설정에 플러그인 추가
module.exports = {
  //...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // 컴파일 타임 플러그인
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
    }),
    // webpack-dev-server 향상 플러그인
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

DevServer

webpack-dev-server는 애플리케이션을 빠르게 개발하는 데 사용할 수 있습니다. 개발 가이드 문서를 통해 시작해 보세요.

이 페이지는 webpack-dev-server(약칭: dev-server)version >= 5.0.0의 동작에 영향을 미치는 옵션에 관해 설명합니다. v4에서 v5로의 마이그레이션 가이드는 여기를 참고하세요.

devServer

object

이 옵션 세트는 webpack-dev-server에서 선택하며 다양한 방식으로 동작을 변경하는 데 사용할 수 있습니다. 다음은 프로젝트 루트에 있는 public/ 디렉터리의 모든 것을 gzip으로 압축하고 제공하는 기본적인 예입니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

서버가 시작되면, 해석된 모듈 목록 앞에 메시지가 표시됩니다.

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory

이를 통해 서버가 어디에 있고 무엇을 제공하는지에 대한 배경지식을 얻을 수 있습니다.

Node.js API를 통해 dev-server를 사용하는 경우 devServer의 옵션은 무시됩니다. 대신 다음 옵션을 첫 번째 매개변수로 전달합니다. new WebpackDevServer({...}, compiler). Node.js API를 통해 webpack-dev-server를 사용하는 방법의 예는 여기를 참고하세요.

Usage via CLI

다음과 같이 CLI를 통해 webpack-dev-server를 호출할 수 있습니다.

npx webpack serve

serve에 대한 CLI 옵션 목록은 여기에서 확인할 수 있습니다.

Usage via API

CLI를 통해 webpack-dev-server를 실행하는 것이 권장되지만, API를 통해 서버를 시작하도록 선택할 수도 있습니다.

webpack-dev-server 관련 API 문서를 참고하세요.

devServer.app

function

'connect', 'fastify' 등과 같은 사용자 정의 서버 애플리케이션을 사용할 수 있습니다. 사용되는 기본 애플리케이션은 'express'입니다.

webpack.config.js

const connect = require('connect');

module.exports = {
  //...
  devServer: {
    app: () => connect(),
  },
};

devServer.allowedHosts

'auto' | 'all' [string]

개발 서버에 접근할 수 있는 서비스를 허용목록에 추가할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

Django의 ALLOWED_HOSTS를 모방하여, .로 시작하는 값을 하위 도메인 와일드카드로 사용할 수 있습니다. .host.com은 host.com, www.host.com, 및 host.com의 다른 하위 도메인과 일치합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    // 이것은 새 하위 도메인이 개발 서버에 접근해야 하는 경우
    // 설정을 업데이트할 필요가 없다는 보너스와 함께
    // 첫 번째 예와 동일한 효과를 얻습니다
    allowedHosts: ['.host.com', 'host2.com'],
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

'all'로 설정하면 호스트 검사를 무시합니다. 호스트를 확인하지 않는 앱은 DNS 리바인딩 공격에 취약하기 때문에 권장하지 않습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts all

'auto'로 설정하면 항상 localhost, host, 및 client.webSocketURL.hostname를 허용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'auto',
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

이 옵션은 시작할 때 ZeroConf 네트워크를 통해 서버를 브로드캐스트합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --bonjour

비활성화 하는법.

npx webpack serve --no-bonjour

커스텀 옵션을 bonjour에 전달할 수도 있습니다. 예를 들면 아래와 같습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: {
      type: 'http',
      protocol: 'udp',
    },
  },
};

devServer.client

logging

브라우저에서 로그 수준을 설정할 수 있습니다. 예를 들면, 다시 로드하기 전, 오류 전 또는 Hot Module Replacement가 활성화된 경우입니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      logging: 'info',
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-logging info

overlay

boolean = true object

컴파일러 오류 또는 경고가 있는 경우 브라우저에 전체 화면 오버레이를 표시합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-overlay

비활성화 하는법.

npx webpack serve --no-client-overlay

보다 세분화된 제어를 위해 다음 속성을 가진 개체를 제공할 수 있습니다.

속성	설명
`errors`	컴파일 오류
`runtimeErrors`	처리되지 않은 런타임 오류
`warnings`	컴파일 경고

모든 속성은 선택 사항이며 제공되지 않은 경우 기본값은 'true'입니다.

예를 들어 컴파일 경고를 비활성화하려면 다음 설정을 제공할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: true,
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors

발생한 오류를 기준으로 필터링하려면 error 매개변수를 허용하고 boolean 값을 반환하는 함수를 전달할 수 있습니다.

예를 들어, AbortController.abort()에 의해 발생한 오류를 무시하려면 다음을 수행하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === 'AbortError') {
            return false;
          }
          return true;
        },
      },
    },
  },
};

progress

boolean

브라우저에서 컴파일 진행률을 백분율로 출력합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      progress: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-progress

비활성화 하는법.

npx webpack serve --no-client-progress

reconnect

boolean = true number

v4.4.0+

클라이언트 재연결을 시도해야 하는 횟수를 dev-server에 알려줍니다. true라면 무제한 재연결을 시도합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-reconnect

false로 설정하면 다시 연결을 시도하지 않습니다.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --no-client-reconnect

클라이언트가 다시 연결을 시도해야 하는 정확한 횟수를 지정할 수도 있습니다.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

클라이언트에 대한 현재 devServer 전송 모드를 개별적으로 선택하거나 커스텀 클라이언트 구현을 제공할 수 있습니다. 이를 통해 브라우저나 다른 클라이언트가 devServer와 통신하는 방법을 지정할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: 'ws',
  },
};

CLI를 통한 사용법.

npx webpack serve --client-web-socket-transport ws --web-socket-server-type ws

커스텀 클라이언트 구현을 생성하려면 BaseClient를 확장하는 클래스를 생성합니다.

호환되는 'ws' 서버와 함께 커스텀 웹 소켓 클라이언트 구현인 CustomClient.js에 대한 경로를 사용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: 'ws',
  },
};

커스텀을 사용하여, 호환 가능한 웹 소켓 클라이언트 및 서버 구현법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

webSocketURL

string object

웹 소켓 서버에 대한 URL을 지정할 수 있습니다. 개발 서버를 프록시하고 클라이언트 스크립트가 연결 위치를 항상 알지 못하는 경우에 유용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

다음 프로퍼티들을 사용하여 객체를 지정할 수도 있습니다.

hostname: 제공된 호스트 이름을 사용하도록 devServer에 연결된 클라이언트에 지시합니다.
pathname: devServer에 연결된 클라이언트에게 제공된 경로를 사용하여 연결하도록 지시합니다.
password: devServer에 연결된 클라이언트에게 제공된 비밀번호를 사용하여 인증하도록 지시합니다.
port: devserver에 연결된 클라이언트에게 제공된 포트를 사용하도록 지시합니다.
protocol: devserver에 연결된 클라이언트에게 제공된 프로토콜을 사용하도록 지시합니다.
username: devserver에 연결된 클라이언트에게 제공된 사용자 이름을 사용하여 인증하도록 지시합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: {
        hostname: '0.0.0.0',
        pathname: '/ws',
        password: 'dev-server',
        port: 8080,
        protocol: 'ws',
        username: 'webpack',
      },
    },
  },
};

devServer.compress

boolean = true

제공되는 모든 항목에 대해 gzip 압축을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --compress

비활성화 하는법.

npx webpack serve --no-compress

devServer.devMiddleware

object

Webpack 애셋을 처리하는 webpack-dev-middleware에 옵션을 제공합니다.

webpack.config.js

module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: 'text/html' },
      publicPath: '/publicPathForDevServe',
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.headers

array function object

모든 응답에 헤더를 추가합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

배열을 전달할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: [
      {
        key: 'X-Custom',
        value: 'foo',
      },
      {
        key: 'Y-Custom',
        value: 'bar',
      },
    ],
  },
};

함수를 전달할 수도 있습니다.

module.exports = {
  //...
  devServer: {
    headers: () => {
      return { 'X-Bar': ['key1=value1', 'key2=value2'] };
    },
  },
};

devServer.historyApiFallback

boolean = false object

HTML5 History API를 사용할 때, index.html 페이지는 404 응답 대신 제공되어야 합니다. true로 설정하여 devServer.historyApiFallback을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --history-api-fallback

비활성화 하는법.

npx webpack serve --no-history-api-fallback

객체를 제공하면 rewrites와 같은 옵션을 사용하여 이 동작을 추가로 제어할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};

경로에 점을 사용할 때(Angular와 공통), disableDotRule을 사용해야 할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
};

더 많은 옵션과 정보는, connect-history-api-fallback 문서를 참고하세요.

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' string

사용할 호스트를 지정합니다. 외부에서 서버에 접근할 수 있도록 하려면, 다음과 같이 지정합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};

CLI를 통한 사용법.

npx webpack serve --host 0.0.0.0

IPv6에서도 작동합니다.

npx webpack serve --host ::

local-ip

local-ip를 호스트로 지정하면 호스트 옵션을 사용 가능한 경우 로컬 IPv4 주소로 확인하려고 시도하고, IPv4를 사용할 수 없는 경우 로컬 IPv6 주소를 확인하려고 시도합니다.

npx webpack serve --host local-ip

local-ipv4

local-ipv4를 호스트로 지정하면 호스트 옵션을 로컬 IPv4 주소로 확인하려고 시도합니다.

npx webpack serve --host local-ipv4

local-ipv6

local-ipv6를 호스트로 지정하면 호스트 옵션을 로컬 IPv6 주소로 확인하려고 시도합니다.

npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

Webpack의 Hot Module Replacement 기능을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --hot

비활성화 하는법.

npx webpack serve --no-hot

빌드 실패의 경우 대체로 페이지 새로 고침 없이 Hot Module Replacement를 활성화하려면 hot: 'only'를 사용하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: 'only',
  },
};

CLI를 통한 사용법.

npx webpack serve --hot only

devServer.ipc

true string

(host 대신) 수신할 Unix 소켓.

true로 설정하면 /your-os-temp-dir/webpack-dev-server.sock에서 소켓을 수신합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    ipc: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --ipc

다음을 사용하여 다른 소켓을 수신할 수도 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    ipc: path.join(__dirname, 'my-socket.sock'),
  },
};

devServer.liveReload

boolean = true

기본적으로, dev-server는 파일 변경이 감지되면 페이지를 다시 로드하고 새로고침 합니다. liveReload를 적용하려면 devServer.hot 옵션을 비활성화하거나 devServer.watchFiles 옵션을 활성화해야 합니다. false로 설정하여 devServer.liveReload를 비활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    liveReload: false,
  },
};

CLI를 통한 사용법.

npx webpack serve --live-reload

비활성화 하는법.

npx webpack serve --no-live-reload

devserver.onListening

function (devServer)

Webpack-dev-server가 포트에서 연결 수신을 시작할 때 커스텀 함수를 실행하는 기능을 제공합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const port = devServer.server.address().port;
      console.log('Listening on port:', port);
    },
  },
};

devServer.open

boolean string object [string, object]

서버가 시작된 후 브라우저를 열도록 dev-server에 지시합니다. 기본 브라우저를 열려면 true로 설정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --open

비활성화 하는법.

npx webpack serve --no-open

브라우저에서 지정된 페이지를 여는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page'],
  },
};

CLI를 통한 사용법.

npx webpack serve --open /my-page

브라우저에서 지정된 여러 페이지를 여는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page', '/another-page'],
  },
};

CLI를 통한 사용법.

npx webpack serve --open /my-page --open /another-page

기본 브라우저 대신 사용할 경우의 브라우저 이름 제공법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'google-chrome',
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --open-app-name 'google-chrome'

객체는 모든 open 옵션을 허용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      target: ['first.html', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

devServer.port

'auto' string number

요청을 수신할 포트 번호를 지정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

CLI를 통한 사용법.

npx webpack serve --port 8080

port 옵션은 null이거나 빈 문자열일 수 없으므로, 자동으로 여유 포트를 사용하려면 port: 'auto'를 사용하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 'auto',
  },
};

CLI를 통한 사용법.

npx webpack serve --port auto

devServer.proxy

[object, function]

별도의 백엔드 API 개발 서버가 있고 동일한 도메인에서 API 요청을 보내려는 경우 일부 URL을 프록시하는 것이 유용할 수 있습니다.

dev-server는 강력한 http-proxy-middleware 패키지를 사용합니다. 고급 사용법에 대한 문서를 확인하세요. http-proxy-middleware의 일부 기능에서는 target 키가 필요하지 않습니다, 예를 들어 router 기능이 있지만, 여기의 설정에 target 키를 포함해야 합니다. 그렇지 않으면 webpack-dev-server가 이를 http-proxy-middleware에 전달하지 않습니다.

localhost:3000의 백엔드에서, 다음을 사용하여 프록시를 활성화할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

/api/users에 대한 요청은 이제 http://localhost:3000/api/users에 대한 요청을 프록시 처리합니다.

/api가 전달되는 것을 원하지 않으면 경로를 다시 작성해야 합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    ],
  },
};

유요하지 않은 인증서로 HTTPS에서 실행되는 백엔드 서버는 기본적으로 허용되지 않습니다. 원하는 경우, 다음과 같이 설정을 수정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        secure: false,
      },
    ],
  },
};

때로는 모든 것을 프록시로 처리하고 싶지 않을 때가 있습니다. 함수의 반환 값에 따라 프록시를 우회할 수 있습니다.

함수에서 요청, 응답 및 프록시 옵션에 접근할 수 있습니다.

프록시로 요청을 계속 처리하려면 null 또는 undefined를 반환합니다.
요청에 대해 404 오류를 생성하려면 false를 반환합니다.
요청을 계속하는 대신, 서비스를 제공할 경로를 반환합니다.

예를 들어 브라우저 요청의 경우 HTML 페이지를 제공하고 싶지만, API 요청의 경우 프록시를 사용하려고 할 경우 다음과 같이 할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    ],
  },
};

동일한 대상에 대한 여러 특정 경로를 프록시 하려면 context 프로퍼티가 있는 하나 이상의 객체 배열을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

루트에 대한 요청은 기본적으로 프록시되지 않습니다. 루트 프록시를 활성화하려면, devMiddleware.index 옵션을 거짓 값으로 지정해야 합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // 루트 프록시를 사용하도록 지정
    },
    proxy: [
      {
        context: () => true,
        target: 'http://localhost:1234',
      },
    ],
  },
};

호스트 헤더의 출처는 기본적으로 프록시 될 때 유지되며, changeOrigin을 true로 설정하여 이 동작을 재정의할 수 있습니다. 이름 기반 가상 호스팅 사이트를 사용하는 것과 같은 경우에 유용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    ],
  },
};

devServer.server

'http' | 'https' | 'spdy' string object

v4.4.0+

서버 및 옵션을 설정할 수 있습니다(기본값은 'http').

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'http',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type http

자체 서명된 인증서로 HTTPS를 통해 서비스하는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'https',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type https

자체 서명된 인증서와 함께 spdy를 사용하여 HTTP/2 통신하는 법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'spdy',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type spdy

객체 구문을 사용한 고유한 인증서 제공법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        ca: './path/to/server.pem',
        pfx: './path/to/server.pfx',
        key: './path/to/server.key',
        cert: './path/to/server.crt',
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server

또한 minVersion과 같은 추가 TLS 옵션을 설정할 수 있으며 각 파일의 내용을 직접 전달할 수 있습니다.

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        minVersion: 'TLSv1.1',
        key: fs.readFileSync(path.join(__dirname, './server.key')),
        pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
        cert: fs.readFileSync(path.join(__dirname, './server.crt')),
        ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

devServer.setupExitSignals

boolean = true

개발 서버를 닫고 SIGINT 및 SIGTERM 신호에서 프로세스를 종료할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    setupExitSignals: true,
  },
};

devServer.setupMiddlewares

function (middlewares, devServer)

v4.7.0+

커스텀 함수를 실행하고 커스텀 미들웨어를 적용하는 기능을 제공합니다.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });

      // 다른 모든 미들웨어보다 먼저 미들웨어를 실행하려면 `unshift` 메소드를 사용하세요
      // 또는 `onBeforeSetupMiddleware` 옵션에서 마이그레이션 할 때 사용하세요
      middlewares.unshift({
        name: 'first-in-array',
        // `path`는 옵셔널입니다
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // 다른 모든 미들웨어 이후에 미들웨어를 실행하려면 `push` 메소드를 사용하세요
      // 또는 `onBeforeSetupMiddleware` 옵션에서 마이그레이션 할 때 사용하세요
      middlewares.push({
        name: 'hello-world-test-one',
        // `path`는 옵셔널입니다
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      middlewares.push((req, res) => {
        res.send('Hello World!');
      });

      return middlewares;
    },
  },
};

devServer.static

boolean string object [string, object]

디렉터리(기본적으로 'public' 디렉터리)에서 정적 파일을 제공하기 위한 옵션을 구성할 수 있습니다. 비활성화하려면 false로 설정하세요:

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: false,
  },
};

CLI를 통한 사용법.

npx webpack serve --static

비활성화 하는법.

npx webpack serve --no-static

단일 디렉터리 설정.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets'],
  },
};

CLI를 통한 사용법.

npx webpack serve --static assets

다중 디렉터리 설정.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets', 'css'],
  },
};

CLI를 통한 사용법.

npx webpack serve --static assets --static css

staticOptions

object

static.directory에서 정적 파일을 제공하기 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 Express 문서를 참고하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

static.directory 콘텐츠를 제공할 URL을 서버에 알려주세요. 예를 들면 /serve-public-path-url/manifest.json에서 assets/manifest.json 파일을 제공하려면, 설정은 다음과 같아야 합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'assets'),
      publicPath: '/serve-public-path-url',
    },
  },
};

여러 개의 정적 폴더가 있는 경우 객체 배열을 제공합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
        publicPath: '/serve-public-path-url',
      },
      {
        directory: path.join(__dirname, 'css'),
        publicPath: '/other-serve-public-path-url',
      },
    ],
  },
};

serveIndex

boolean object = { icons: true }

dev-server가 활성화되면 serveIndex 미들웨어를 사용하도록 지시합니다.

serveIndex 미들웨어는 index.html 파일이 없는 디렉터리를 볼 때 디렉터리 목록을 생성합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      serveIndex: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --static-serve-index

비활성화 하는법.

npx webpack serve --no-static-serve-index

watch

boolean object

dev-server에게 static.directory 옵션이 제공하는 파일을 감시하도록 지시합니다. 이는 기본적으로 활성화되어 있으며, 파일 변경 시 전체 페이지가 새로고침됩니다. 이것은 watch옵션을 false로 설정하여 비활성화할 수 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: false,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --static-watch

비활성화 하는법.

npx webpack serve --no-static-watch

static.directory에서 정적 파일을 보기 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 chokidar 문서를 참고하세요.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: {
        ignored: '*.txt',
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

파일 변경 사항을 감시할 globs/directories/files 목록을 구성할 수 있습니다. 예를 들면 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  },
};

파일 감시를 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 chokidar 문서를 참고하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: {
      paths: ['src/**/*.php', 'public/**/*'],
      options: {
        usePolling: false,
      },
    },
  },
};

devServer.webSocketServer

false | 'sockjs' | 'ws' string function object

현재 웹 소켓 서버를 선택하거나 커스텀 웹 소켓 서버를 제공할 수 있습니다.

현재 기본 모드는 'ws'입니다. 이 모드는 ws를 서버로 사용하고, 기본 WebSocket을 클라이언트로 사용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    webSocketServer: 'ws',
  },
};

커스텀 서버를 구현하려면, BaseServer를 확장하는 클래스를 생성하세요.

호환되는 'ws' 클라이언트와 함께 커스텀 WebSocket 서버가 구현되어 있는 CustomServer.js에 대한 경로 사용법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

호환 가능한 커스텀 WebSocket 클라이언트 및 서버 구현 사용법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

Cache

cache

boolean object

생성된 webpack 모듈 및 청크를 캐시하여 빌드 속도를 개선하세요. cache는 development 모드에서 type: 'memory'로 설정되고 production 모드에서는 비활성화됩니다. cache: true는 cache: { type: 'memory' }의 별칭입니다. 캐싱을 비활성화하려면 false로 설정하세요.

webpack.config.js

module.exports = {
  //...
  cache: false,
};

cache.type을 'filesystem'으로 설정하는 동안 더 많은 옵션을 설정할 수 있습니다.

cache.allowCollectingMemory

역 직렬화를 하는 동안 미사용 할당 메모리를 수집합니다. cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다. 이를 위해서는 데이터를 더 작은 버퍼에 복사해야 하며 성능이 저하됩니다.

타입: boolean
- 프로덕션 모드에서는 기본적으로 false이고 개발 모드에서는 true입니다.
5.35.0+

webpack.config.js

module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};

cache.buildDependencies

object

cache.buildDependencies는 빌드에 대한 추가 코드 디펜던시 배열의 객체입니다. Webpack은 각 항목의 해시와 모든 디펜던시를 사용하여 파일 시스템 캐시를 무효화합니다.

webpack의 모든 디펜던시를 얻기 위해 기본값은 webpack/lib입니다.

webpack.config.js

module.exports = {
  cache: {
    buildDependencies: {
      // 이 파일의 모든 디펜던시를 만듭니다(빌드 디펜던시).
      config: [__filename],
      // 기본적으로 webpack과 로더는 빌드 디펜던시에 포함됩니다.
    },
  },
};

cache.cacheDirectory

string

캐시의 기본 디렉터리입니다. 기본값은 node_modules/.cache/webpack 입니다.

cache.cacheDirectory는 cache.type이 'filesystem'으로 설정되어 있을 경우만 사용 가능합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.temp_cache'),
  },
};

cache.cacheLocation

string

캐시의 위치입니다. 기본값은 path.resolve(cache.cacheDirectory, cache.name)입니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    cacheLocation: path.resolve(__dirname, '.test_cache'),
  },
};

cache.cacheUnaffected

변경되지 않은 모듈의 캐시를 계산하고 변경되지 않은 모듈만 참조합니다. 이는 cache.type이 'memory'로 설정된 경우에만 사용할 수 있으며, experiments.cacheUnaffected가 활성화되어 있어야 사용할 수 있습니다.

Type: boolean
v5.54.0+

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
    cacheUnaffected: true,
  },
};

cache.compression

false | 'gzip' | 'brotli'

5.42.0+

캐시 파일에 사용되는 압축 유형입니다. 기본적으로 이 값은 false 입니다.

cache.compression은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다..

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    compression: 'gzip',
  },
};

cache.hashAlgorithm

string

알고리즘은 해시함수를 사용했습니다. 자세한 정보는 Node.js crypto를 참고하세요. 기본값은 md4입니다.

cache.hashAlgorithm은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    hashAlgorithm: 'md4',
  },
};

cache.idleTimeout

number = 60000

밀리 초 단위의 시간입니다. cache.idleTimeout은 캐시 저장이 발생해야 하는 기간을 나타냅니다.

cache.idleTimeout 옵션은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeout: 60000,
  },
};

cache.idleTimeoutAfterLargeChanges

number = 1000

5.41.0+

밀리 초 단위의 시간입니다. cache.idleTimeoutAfterLargeChanges는 더 큰 변경 사항이 감지된 경우 캐시 저장이 발생해야 하는 기간을 나타냅니다.

cache.idleTimeoutAfterLargeChanges 옵션은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutAfterLargeChanges: 1000,
  },
};

cache.idleTimeoutForInitialStore

number = 5000

밀리 초 단위의 시간입니다. cache.idleTimeoutForInitialStore는 초기 캐시 저장이 발생해야 하는 기간입니다.

cache.idleTimeoutForInitialStore 옵션은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //..
  cache: {
    type: 'filesystem',
    idleTimeoutForInitialStore: 0,
  },
};

cache.managedPaths

[string] = ['./node_modules']

cache.managedPaths는 패키지 관리자 전용 관리 경로의 배열입니다. Webpack은 해싱 및 타임 스탬프를 방지하고 버전이 고유하고 스냅샷으로 사용한다고 가정합니다(메모리 및 파일 시스템 캐시 모두).

cache.maxAge

number = 5184000000

5.30.0+

사용되지 않은 캐시 항목이 파일 시스템 캐시에 머무를 수 있는 밀리 초 단위의 시간입니다. 기본값은 1개월입니다.

cache.maxAge는 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxAge: 5184000000,
  },
};

cache.maxGenerations

number

5.30.0+

메모리 캐시에서 사용되지 않는 캐시 항목의 수명을 정의합니다.

cache.maxGenerations: 1: 컴파일 시 사용되지 않은 캐시는 제거됩니다.
cache.maxGenerations: Infinity: 캐시는 영원히 유지됩니다.

cache.maxGenerations은 cache.type이 'memory'로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'memory',
    maxGenerations: Infinity,
  },
};

cache.maxMemoryGenerations

number

5.30.0+

메모리 캐시에서 사용되지 않는 캐시 항목의 수명을 정의합니다.

cache.maxMemoryGenerations: 0: 영구 캐시는 추가 메모리 캐시를 사용하지 않습니다. 디스크에 직렬화될 때까지 메모리의 항목만 캐시 합니다. 직렬화되면 다음 읽기는 디스크에서 다시 직렬화를 해제합니다. 이 모드는 메모리 사용을 최소화하지만 성능 비용이 발생합니다.
cache.maxMemoryGenerations: 1: 항목이 직렬화되고 하나 이상의 컴파일에 사용되지 않으면 메모리 캐시에서 항목이 제거됩니다. 다시 사용하면 디스크에서 직렬화 해제됩니다. 이 모드는 메모리 캐시에 활성 항목을 유지하면서 메모리 사용량을 최소화합니다.
cache.maxMemoryGenerations: 0보다 큰 작은 숫자는 GC 작업에 대한 성능 비용이 있습니다. 숫자가 증가할수록 낮아집니다.
cache.maxMemoryGenerations: 기본값은 development 모드에서 10이고 production 모드에서 Infinity 입니다.

cache.maxMemoryGenerations은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    maxMemoryGenerations: Infinity,
  },
};

cache.memoryCacheUnaffected

변경되지 않은 모듈의 캐시를 계산하고 변경되지 않은 모듈만 참조합니다. 이는 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있으며, experiments.cacheUnaffected가 활성화되어 있어야 사용할 수 있습니다.

Type: boolean
v5.54.0+

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    memoryCacheUnaffected: true,
  },
};

cache.name

string

캐시의 이름입니다. 이름이 다르면 공존하는 캐시가 달라집니다. 기본값은 ${config.name}-${config.mode}입니다. 독립적인 캐시가 있어야하는 여러개의 설정이 있을 때 cache.name을 사용하는 것이 좋습니다.

cache.name은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    name: 'AppBuildCache',
  },
};

cache.profile

boolean = false

'filesystem' 타입의 개별 캐시 항목에 대한 자세한 타이밍 정보를 추적하고 기록합니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    profile: true,
  },
};

cache.readonly

boolean 5.85.0

webpack이 캐시를 파일 시스템에 저장하지 못하도록 합니다. cache.type === "filesystem" 및 cache.store === 'pack'인 경우에만 사용할 수 있습니다.

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
    readonly: true,
  },
};

cache.store

string = 'pack': 'pack'

cache.store는 파일 시스템에 데이터를 저장할 시기를 webpack에게 알려줍니다.

'pack': 모든 캐시 된 항목에 대해 컴파일러가 유휴 상태 일 때 데이터 저장

cache.store는 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    store: 'pack',
  },
};

cache.type

string: 'memory' | 'filesystem'

cache 타입을 메모리 또는 파일 시스템으로 설정합니다. memory 옵션은 간단하며 webpack에 캐시를 메모리에 저장하도록 지시하고 추가 설정을 허용하지 않습니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'memory',
  },
};

cache.version

string = ''

캐시 데이터의 버전입니다. 다른 버전에서는 캐시를 재사용하고 기존 콘텐츠를 재정의 할 수 없습니다. 캐시 재사용을 허용하지 않는 방식으로 설정이 변경된 경우 버전을 업데이트하세요. 이것은 캐시를 무효화합니다.

cache.version은 cache.type이 'filesystem'으로 설정된 경우에만 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  cache: {
    type: 'filesystem',
    version: 'your_version',
  },
};

Setup cache in CI/CD system

파일 시스템 캐시를 사용하면 CI의 빌드 간에 캐시를 공유할 수 있습니다. 캐시를 설정하려면,

CI에는 빌드 간에 캐시를 공유하는 옵션이 있어야 합니다.
CI는 동일한 절대 경로에서 작업을 실행해야 합니다. Webpack 캐시 파일은 절대 경로를 저장하기 때문에 중요합니다.

GitLab CI/CD

일반적인 설정은 다음과 같습니다.

variables:
  # "main" 브랜치 캐시를 사용하기 위한 폴백, GitLab Runner 13.4 필요
  CACHE_FALLBACK_KEY: main

# 이것은 webpack 빌드 작업입니다
build-job:
  cache:
    key: '$CI_COMMIT_REF_SLUG' # 브랜치/태그 이름
    paths:
      # 캐시 디렉터리
      # 이 작업에서 "npm ci"를 실행하거나 기본 캐시 디렉터리를 변경하시 않았는지 확인하세요
      # 그렇지 않으면 "npm ci"가 캐시 파일을 정리합니다.
      - node_modules/.cache/webpack/

Github actions

- uses: actions/cache@v3
  with:
    # 캐시 디렉터리
    path: node_modules/.cache/webpack/
    key: ${{ GITHUB_REF_NAME }}-webpack-build
    # "main" 브랜치 캐시를 사용하기 위한 폴백
    restore-keys: |
      main-webpack-build

Devtool

devtool 옵션은 소스맵 생성 여부와 방법을 제어합니다.

보다 세밀한 설정을 위해 SourceMapDevToolPlugin을 사용하세요. 기존 소스맵을 처리하려면 source-map-loader를 참고하세요.

devtool

string = 'eval' false

디버깅 과정 향상을 위해 source mapping 스타일을 선택합니다. 이 값은 빌드 및 리빌드 속도에 큰 영향을 미칠 수 있습니다.

T>devtool 옵션을 사용하는 대신, 더 많은 옵션이 있는 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin을 직접 사용할 수도 있습니다. devtool 옵션과 플러그인을 함께 사용해서는 안 됩니다. devtool 옵션은 내부적으로 플러그인을 추가하므로 플러그인을 두 번 적용하는 것과 같습니다.

devtool	성능	프로덕션	품질	코멘트
(none)	build: 가장 빠름 rebuild: 가장 빠름	가능	bundle	최대 성능을 갖춘 프로덕션 빌드를 위해 추천하는 옵션입니다.
`eval`	build: 빠름 rebuild: 가장 빠름	no	generated	최대 성능을 갖춘 개발 빌드를 위해 추천하는 옵션입니다.
`eval-cheap-source-map`	build: 보통 rebuild: 빠름	no	transformed	개발 빌드를 위한 균형 잡힌 옵션입니다.
`eval-cheap-module-source-map`	build: 느림 rebuild: 빠름	no	original lines	개발 빌드를 위한 균형 잡힌 옵션입니다.
`eval-source-map`	build: 가장 느림 rebuild: 보통	no	original	고품질 소스맵을 포함한 개발 빌드를 위해 추천하는 옵션입니다.
`cheap-source-map`	build: 보통 rebuild: 느림	no	transformed
`cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines
`source-map`	build: 가장 느림 rebuild: 가장 느림	yes	original	고품질 소스맵을 포함한 프로덕션 빌드를 위해 추천하는 옵션입니다.
`inline-cheap-source-map`	build: 보통 rebuild: 느림	no	transformed
`inline-cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines
`inline-source-map`	build: 가장 느림 rebuild: 가장 느림	no	original	단일 파일을 내보낼 때 선택할 수 있습니다.
`eval-nosources-cheap-source-map`	build: 보통 rebuild: 빠름	no	transformed	소스 코드를 포함하지 않습니다.
`eval-nosources-cheap-module-source-map`	build: 느림 rebuild: 빠름	no	original lines	소스 코드를 포함하지 않습니다.
`eval-nosources-source-map`	build: 가장 느림 rebuild: 보통	no	original	소스 코드를 포함하지 않습니다.
`inline-nosources-cheap-source-map`	build: 보통 rebuild: 느림	no	transformed	소스 코드를 포함하지 않습니다.
`inline-nosources-cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines	소스 코드를 포함하지 않습니다.
`inline-nosources-source-map`	build: 가장 느림 rebuild: 가장 느림	no	original	소스 코드를 포함하지 않습니다.
`nosources-cheap-source-map`	build: 보통 rebuild: 느림	no	transformed	소스 코드를 포함하지 않습니다.
`nosources-cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines	소스 코드를 포함하지 않습니다.
`nosources-source-map`	build: 가장 느림 rebuild: 가장 느림	yes	original	소스 코드를 포함하지 않습니다.
`hidden-nosources-cheap-source-map`	build: 보통 rebuild: 느림	no	transformed	참조가 없으며, 소스 코드를 포함하지 않습니다.
`hidden-nosources-cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines	참조가 없으며, 소스 코드를 포함하지 않습니다.
`hidden-nosources-source-map`	build: 가장 느림 rebuild: 가장 느림	yes	original	참조가 없으며, 소스 코드를 포함하지 않습니다.
`hidden-cheap-source-map`	build: 보통 rebuild: 느림	no	transformed	참조가 없습니다.
`hidden-cheap-module-source-map`	build: 느림 rebuild: 느림	no	original lines	참조가 없습니다.
`hidden-source-map`	build: 가장 느림 rebuild: 가장 느림	yes	original	참조가 없으며, 에러 보고 목적으로 소스맵을 사용할 때 선택 할 수 있습니다.

단축 명령어	설명
performance: build	초기 빌드 성능은 devtool 설정에 어떻게 영향을 받습니까?
performance: rebuild	증분 빌드 성능은 devtool 설정에 어떻게 영향을 받습니까? 느린 devtool은 watch 모드에서 개발 피드백 루프를 줄일 수 있습니다. 보통 빌드보다 리빌드 속도가 빠를 것으로 예상하기 때문에 빌드 성능과 비교했을 때 규모가 다릅니다.
production	프로덕션 빌드에 이 devtool 을 사용하는 것이 합리적인가요? devtool이 사용자 경험에 부정적인 영향을 미칠 경우 일반적으로 `아니오` 입니다.
quality: bundled	단일 코드 blob에서 생성된 모든 청크 코드를 볼 수 있습니다. 이것은 devtooling 지원이 없는 원시 출력 파일입니다.
quality: generated	생성된 코드를 표시합니다. 하지만 브라우저 devtool에서는 각 모듈이 별도의 코드 파일로 표시됩니다.
quality: transformed	생성된 코드를 표시합니다. 코드는 로더에 의한 사전 처리가 되었으나, 추가 webpack 변환은 적용되지 않았습니다. 소스 라인만 매핑되고 생성되지 않은 열 정보는 폐기됩니다. 이를 통해 최소화 도구와 함께 작동하지 않는 줄 중간에 중단점을 설정할 수 없도록 합니다.
quality: original lines	모든 로더가 소스맵핑을 지원한다고 가정하여 개발자가 작성한 원본 코드가 표시됩니다. 소스 라인만 매핑되고 생성되지 않은 열 정보는 폐기됩니다. 이를 통해 최소화 도구와 함께 작동하지 않는 줄 중간에 중단점을 설정할 수 없도록 합니다.
quality: original	모든 로더가 소스맵핑을 지원한다고 가정하여 개발자가 작성한 원본 코드가 표시됩니다.
`eval-*` addition	모듈별로 소스맵을 생성하고 eval을 통해 추가합니다 (attach it via eval). 리빌드 성능이 개선되어 개발에 권장합니다. 윈도우즈 디펜더의 바이러스 검사로 인해 속도가 크게 저하되는 문제가 있습니다.
`inline-*` addition	소스맵을 별도의 파일을 만드는 대신 원본 파일에 인라인으로 추가합니다.
`hidden-*` addition	소스맵에 대한 참조가 추가되지 않았습니다. 오류 보고 목적 등, 소스맵을 배포히지 않지만 반드시 생성되어야 하는 경우에 사용합니다.
`nosources-*` addition	소스 코드가 소스맵에 포함되어 있지 않습니다. 이것은 원본 파일을 참조해야 할 때 유용 할 수 있습니다 (추가 설정 옵션이 필요함).

이 값 중 일부는 개발에, 일부는 프로덕션에 적합합니다. 개발의 경우 일반적으로 번들 크기 보다는 빠른 소스맵이 필요합니다. 하지만 프로덕션의 경우 정확하고 최소화를 지원하는 별도의 소스맵이 필요합니다.

Qualities

bundled code - 생성된 모든 코드가 큰 코드 blob으로 표시됩니다. 모듈은 서로 분리되어 있지 않습니다.

generated code - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. webpack에 의해 생성된 코드가 표시됩니다. 예를 들면 import {test} from "module"; test(); 대신, var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();이 표시됩니다.

transformed code - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. webpack이 변환하기 전이지만, 로더가 트랜스파일한 후의 코드가 표시됩니다. 예를 들면, import {test} from "module"; class A extends test {} 대신, import {test} from "module"; var A = function(_test) { ... }(test);와 같은 코드가 표시됩니다.

original source - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. 개발자가 작성한 트랜스파일 전의 코드를 볼 수 있습니다. 이것은 로더 지원에 따라 다릅니다.

without source content - 소스맵에 소스의 내용이 포함되지 않습니다. 일반적으로 브라우저는 웹 서버 또는 파일 시스템에서 소스를 로드합니다. 소스 URL과 일치하도록 output.devtoolModuleFilenameTemplate을 올바르게 설정해야 합니다.

(lines only) - 소스맵이 한 줄당 하나의 매핑으로 단순화됩니다. 이것은 일반적으로 구문당 단일 매핑을 의미합니다 (이 방식으로 개발자가 작성했다고 가정합니다). 이를 통해 구문 레벨에서 디버깅 실행을 방지하고, 하나의 라인에서 열에 중단점을 설정할 수 없습니다. 최소화 도구는 보통 한 줄로 내보내므로 최소화와 함께 사용하는 것은 불가능합니다.

Development

다음 옵션은 개발에 이상적입니다.

eval - 각 모듈을 eval() 및 //# sourceURL을 통해 실행합니다. 이것은 꽤 빠릅니다. 원본 코드 대신 트랜스파일된 코드에 매핑되기 때문에 줄 번호가 올바르게 표시되지 않는 것이 가장 큰 단점입니다. (로더의 소스맵이 없음)

eval-source-map - 각 모듈을 eval()으로 실행되고 소스맵을 eval()에 DataUrl로 추가합니다. 처음에는 느리지만, 리빌드를 빠르게 제공하고 실제 파일을 생성합니다. 줄 번호는 원본 코드에 매핑되므로 올바르게 매핑됩니다. 최고 품질의 개발용 소스맵을 생성합니다.

eval-cheap-source-map - eval-source-map과 유사하며 각 모듈을 eval()으로 실행합니다. 열 매핑이 없고 줄 번호만 매핑하므로 비용이 "저렴"합니다. 로더의 소스맵을 무시하고 eval devtool과 비슷하게 트랜스파일 된 코드만 표시합니다.

eval-cheap-module-source-map - eval-cheap-source-map과 유사하지만, 이 경우 더 나은 결과를 위해 로더의 소스맵을 사용합니다. 그러나 로더의 소스맵은 라인 당 단일 매핑으로 단순화됩니다.

Special cases

다음 옵션은 개발이나 프로덕션에 적합하지 않습니다. 써드 파티 도구를 사용하는 등, 특별한 경우에 필요합니다.

inline-source-map - 소스맵을 DataUrl로 번들에 추가합니다.

cheap-source-map - 로더 소스맵을 무시하고 열 매핑이 없는 소스맵입니다.

inline-cheap-source-map - cheap-source-map과 유사하지만, 소스맵을 DataUrl로 번들에 추가합니다.

cheap-module-source-map - 열 매핑이없는 소스맵이며 로더의 소스맵을 줄 당 단일 매핑으로 단순화합니다.

inline-cheap-module-source-map - cheap-module-source-map과 비슷하지만, 소스맵을 DataUrl로 번들에 추가합니다.

Production

아래의 옵션은 일반적으로 프로덕션에서 사용됩니다.

(none)(devtool 옵션 생략 또는 devtool: false로 설정) - 소스맵을 내보내지 않습니다. 이것은 시작하기에 좋은 옵션입니다.

source-map - 전체 소스맵을 별도의 파일로 내보냅니다. 번들에 참조 주석을 추가하여 개발 도구에서 찾을 수 있도록 합니다.

hidden-source-map - source-map과 동일하지만 번들에 참조 주석을 추가하지 않습니다. 오류 보고서의 오류 스텍 추적에만 소스맵을 매핑하고 브라우저 개발 도구에는 소스맵을 노출하지 않는 경우에 유용합니다.

nosources-source-map - sourcesContent없이 소스맵이 생성됩니다. 모든 소스 코드를 노출하지 않고 클라이언트에서 스텍 추적을 매핑하는 데 사용할 수 있습니다. 소스맵 파일을 웹 서버에 배포 할 수 있습니다.

Extends

extends

string | string[]

webpack v5.82.0+ webpack-cli v5.1.0+

'extends' 속성을 사용하면 기존 설정을 확장하여 기본으로 사용할 수 있습니다. 내부적으로 webpack-merge 패키지를 사용하여 설정을 병합하고 여러 설정 간에 설정이 중복되지 않도록 도와줍니다.

base.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
};

webpack.config.js

module.exports = {
  extends: path.resolve(__dirname, './base.webpack.config.js'),
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Extending multiple configurations

extends 속성에 설정 경로 배열을 전달하여 한 번에 여러 설정을 확장할 수 있습니다.

'extends' 속성의 설정은 오른쪽에서 왼쪽으로 병합됩니다. 즉, 오른쪽의 설정이 왼쪽의 설정으로 병합됩니다. 오른쪽 설정에서 동일한 속성을 전달하여 설정을 재정의할 수 있습니다.

js.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

css.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

webpack.config.js

module.exports = {
  extends: [
    path.resolve(__dirname, './js.webpack.config.js'),
    path.resolve(__dirname, './css.webpack.config.js'),
  ],
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Overridding Configurations

확장된 설정에서 확장된 설정과 동일한 속성을 전달하여 확장된 설정의 설정을 재정의할 수 있습니다.

base.webpack.config.js

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

webpack.config.js

module.exports = {
  extends: path.resolve(__dirname, './base.webpack.config.js'),
  entry: './src/index.js',
  // output 경로 및 파일 이름 재정의
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
  },
};

Loading configuration from external packages

패키지 이름을 extends 속성에 전달하여 타사 패키지에서 설정을 로드할 수도 있습니다. 패키지는 package.json에서 webpack 설정을 내보내야 합니다.

webpack.config.js

module.exports = {
  extends: require.resolve('webpack-config-foo'),
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Target

Webpack은 다양한 환경과 target을 컴파일합니다. target이 무엇인지 자세히 이해하고 싶다면 target의 개념에 대한 페이지를 읽어보세요.

target

string [string] false

특정 환경에 대한 런타임 코드를 생성하도록 webpack에 지시합니다. webpack 런타임 코드는 작성하는 사용자 코드와 동일하지 않습니다. 예를 들어 소스 코드에 화살표 함수가 있고 ES5 환경에서 번들된 코드를 실행하려면, Babel과 같은 트랜스파일러로 해당 코드를 트랜스파일해야 합니다. Webpack은 target이 구성된 상태에서는 자동으로 트랜스파일하지 않습니다.

browserslist 설정이 없으면 'browserslist' 혹은 'web'으로 설정됩니다.

string

다음의 문자열은 WebpackOptionsApply를 통해서 지원됩니다.

Option	Description
`async-node[[X].Y]`	Node.js와 유사한 환경에서 사용할 수 있도록 컴파일합니다 (`fs`와 `vm`을 사용하여 청크를 비동기식으로 로드합니다.)
`electron[[X].Y]-main`	메인 프로세스를 위해 Electron으로 컴파일합니다.
`electron[[X].Y]-renderer`	렌더러 프로세스를 위해 Electron으로 컴파일하여 `JsonpTemplatePlugin`, 브라우저 환경을 위한 `FunctionModulePlugin`, CommonJS와 Electron의 내장 모듈을 위한 `NodeTargetPlugin` 및 `ExternalsPlugin`을 사용하여 대상을 제공합니다.
`electron[[X].Y]-preload`	렌더러 프로세스를 위해 Electron으로 컴파일하여 `asyncChunkLoading`을 `true`로 설정한 `NodeTemplatePlugin`, 브라우저 환경을 위한`FunctionModulePlugin`, `NodeTargetPlugin`, CommonJS 및 Electron의 내장 모듈을 위한 `ExternalsPlugin`을 사용하여 대상을 제공합니다.
`node[[X].Y]`	Node.js와 유사한 환경에서 사용할 수 있도록 컴파일 합니다. (Node.js `require`를 사용하여 청크를 로드합니다.)
`node-webkit[[X].Y]`	WebKit에서 사용하기 위해 컴파일하고 청크를 로드하기 위해 JSONP를 사용합니다. 내장된 Node.js 모듈 및 (실험적으로) `nw.gui`를 가져올 수 있습니다.
`nwjs[[X].Y]`	`node-webkit`과 동일합니다.
`web`	브라우저와 동일한 환경에서 사용하기 위하여 컴파일합니다. (기본값)
`webworker`	웹 워커로 컴파일합니다.
`esX`	지정된 ECMAScript 버전으로 컴파일합니다. 예: es5, es2020
`browserslist`	browserslist-config에서 (browserslist config를 사용할 수 있는 경우 기본값) 플랫폼과 ES 기능을 추론합니다.

예를 들어, target을 "electron-main"으로 설정하면, webpack은 electron의 여러 변수를 추가합니다.

node와 electron의 버전은 선택할 수 있습니다. 위 표에서 [[X].Y]로 표시됩니다.

webpack.config.js

module.exports = {
  // ...
  target: 'node12.18',
};

런타임 코드를 생성하는데 사용할 수 있는 ES 기능의 결정에 도움을 줍니다. (모든 청크와 모듈은 런타임 코드로 래핑 됩니다)

browserslist

프로젝트에 browserslist 설정이 있으면, webpack은 이 설정을 사용합니다.

런타임 코드를 생성하는데 사용할 수 있는 ES 기능을 결정합니다.
환경을 추론합니다. (예를 들어 일부 output.environment 설정이 있는 target: "node"와 동일한 마지막 2개의 Node 버전).

지원되는 browserslist

browserslist - 자동으로 browserslist 설정과 환경을 사용 (가장 근접한 package.json이나 BROWSERSLIST 환경 변수, 자세한 사항은 browserslist documentation을 참고)
browserslist:modern - 자동으로 해석된 browserslist 설정에서 modern사용
browserslist:last 2 versions - 명시적으로 browserslist 쿼리 사용(설정은 무시됨)
browserslist:/path/to/config - browserslist 설정을 지정할 수 있음
browserslist:/path/to/config:modern - browserslist 설정 및 환경을 명시적으로 지정

[string]

복수의 target을 작성하면 기능의 공통적인 하위 집합이 사용됩니다.

webpack.config.js

module.exports = {
  // ...
  target: ['web', 'es5'],
};

Webpack은 웹 플랫폼을 위해 런타임 코드를 생성하고 ES5 기능만 사용합니다.

현재로서는 모든 target을 같이 혼용하여 사용하지 못합니다.

webpack.config.js

module.exports = {
  // ...
  target: ['web', 'node'],
};

에러의 원인이 됩니다. 현재 webpack은 범용적인 target을 지원하지 않습니다.

false

target을 false로 설정하면, 위 목록에서 미리 정의된 target 중에 원하는 target이 없으면 플러그인이 적용되지 않습니다.

webpack.config.js

module.exports = {
  // ...
  target: false,
};

혹은 원하는 특정한 플러그인을 적용할 수 있습니다.

webpack.config.js

const webpack = require('webpack');

module.exports = {
  // ...
  target: false,
  plugins: [
    new webpack.web.JsonpTemplatePlugin(options.output),
    new webpack.LoaderTargetPlugin('web'),
  ],
};

target 또는 환경에 대한 정보가 없으면, ES2015를 사용합니다.

Watch and WatchOptions

Webpack은 파일이 변경될 때마다 이를 감지하여 다시 컴파일 할 수 있습니다. 이 페이지에서는 변경감지가 제대로 작동하지 않는 경우, 이 기능을 활성화 하는 방법과 몇가지 조정에 대해 설명합니다.

watch

boolean = false

watch 모드를 켭니다. 이제 초기 빌드 후 webpack은 해석 된 파일의 변경 사항을 계속 감시합니다.

webpack.config.js

module.exports = {
  //...
  watch: true,
};

watchOptions

object

watch 모드를 사용자 지정하는 데 사용되는 일련의 옵션입니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

number = 20

첫 번째 파일이 변경된 후 다시 빌드하기 전에 지연을 추가합니다. 이를 통해 webpack은 이 기간 동안 일어난 다른 모든 변경 사항을 하나의 재빌드로 합칠 수 있습니다. 값은 밀리초(ms) 단위로 전달합니다.

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp string [string]

일부 시스템의 경우 많은 파일을 감시하다보면 CPU나 메모리 사용량이 증가할 수 있습니다. 정규 표현식을 사용하여 node_modules와 같은 거대한 폴더를 제외할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/,
  },
};

또는, 전역 패턴을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
  },
};

여러 개의 전역 패턴을 사용할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

또한 절대 경로를 지정할 수 있습니다.

const path = require('path');
module.exports = {
  //...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
  },
};

전역 패턴을 사용할 때는, glob-to-regexp를 이용하여 정규 표현식으로 변환하기 때문에 watchOptions.ignored에 전역 패턴을 사용하기 전에 미리 익숙해지면 좋습니다.

watchOptions.poll

boolean = false number

기본 폴링 간격을 5007로 설정하는 true를 전달하거나 폴링 간격을 밀리초(ms)로 지정하여 polling을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
};

watchOptions.followSymlinks

파일을 찾는 동안 심볼릭 링크를 따라갑니다. webpack이 이미 resolve.symlinks를 사용하여 심볼릭 링크를 해석했으므로 대개 이 작업이 필요하지는 않습니다.

타입: boolean

예시는 다음과 같습니다.

module.exports = {
  //...
  watchOptions: {
    followSymlinks: true,
  },
};

watchOptions.stdin

stdin 스트림이 종료되면 감시를 중단합니다.

Type: boolean

Example:

module.exports = {
  //...
  watchOptions: {
    stdin: true,
  },
};

Troubleshooting

문제가 발생하면 다음 참고 사항을 확인하세요. webpack이 파일 변경을 놓칠 수 있는 이유는 다양합니다.

Changes Seen But Not Processed

--progress 플래그와 함께 webpack을 실행하여 webpack에 변경 사항이 전달되지 않는지 확인하세요. 저장할 때 진행 상황이 표시되지만 파일이 출력되지 않으면 파일 감시 문제가 아니라 구성 문제일 수 있습니다.

webpack --watch --progress

Not Enough Watchers

시스템에 사용 가능한 감시자가 충분한 지 확인하세요. 이 값이 너무 낮으면, Webpack의 파일 감시자가 변경 사항을 인식하지 못합니다.

cat /proc/sys/fs/inotify/max_user_watches

Arch 사용자는, /etc/sysctl.d/99-sysctl.conf에 fs.inotify.max_user_watches=524288을 추가한 후 sysctl --system을 실행합니다. Ubuntu 사용자 및 기타 사용자는 다음과 같이 실행합니다: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

macOS fsevents Bug

macOS에서는, 특정 시나리오에서 폴더가 손상될 수 있습니다. 이 기사를 참고하세요.

Windows Paths

webpack은 __dirname + '/app/folder'와 같은 많은 설정 옵션에서 절대 경로를 사용할 것으로 기대하기 때문에 윈도우의 \ 경로 구분 기호는 일부 기능을 손상시킬 수 있습니다.

올바른 구분 기호를 사용하세요. 예를들면, path.resolve(__dirname, 'app/folder') 이나 path.join(__dirname, 'app', 'folder')와 같이 사용하세요.

Vim

일부 시스템에서는 Vim은 백업 카피 옵션이 auto로 미리 설정되어 있습니다. 이로 인해 시스템의 파일 감시 메커니즘에 문제가 발생할 수 있습니다. 이 옵션을 yes로 전환하면 파일의 복사본이 만들어지고 저장 시 원본을 덮어쓰게 됩니다.

:set backupcopy=yes

Saving in WebStorm

JetBrains WebStorm IDE를 사용할 때, 변경된 파일을 저장해도 예상대로 감시자에게 트리거되지 않을 수 있습니다. 원래 파일을 덮어쓰기 전에 먼저 임시 위치에 저장할지 결정하는 설정에서 Back up files before saving 옵션을 비활성화 해 보세요. 이는 메뉴에서 다음과 같이 설정할 수 있습니다. File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving Webstorm의 일부 버전에서 이 옵션은 "safe write" 사용(변경 사항을 임시 파일에 먼저 저장합니다)이라고 불릴 수 있습니다.

Externals

externals 옵션은 출력 번들에서 의존성을 제외하는 방법을 제공합니다. 대신, 생성된 번들은 소비자(모든 최종 사용자 애플리케이션)의 환경에 존재하기 위해 해당 의존성에 의존합니다. 이 기능은 일반적으로 라이브러리 개발자에게 가장 유용하지만, 이것을 위한 다양한 애플리케이션이 있습니다.

externals

string object function RegExp [string, object, function, RegExp]

특정 import 된 패키지의 번들링을 방지하고 대신 런타임에 이러한 외부 종속성을 검색합니다.

예를 들어, 번들링 대신 CDN에서 jQuery를 포함하려면 다음을 수행해야 합니다.

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"
></script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

이렇게 하면 종속 모듈이 변경되지 않습니다. 즉, 아래 표시된 코드가 계속 작동합니다.

import $ from 'jquery';

$('.my-element').animate(/* ... */);

위의 webpack.config.js에서 externals에 지정된 속성 이름 jquery는 import $ from 'jquery'의 모듈인 jquery가 번들링에서 제외되어야 함을 나타냅니다. 기본 외부 라이브러리 유형이 var이므로 이 모듈을 대체하기 위해 jQuery값이 전역 jQuery변수를 검색하는 데 사용됩니다. externalsType를 참고하세요.

위에서는 외부 전역 변수를 사용하는 예를 보여주었지만, 실제로 외부 속성에는 전역변수, CommonJS, AMD, ES2015 모듈과 같은 형식으로 사용할 수 있습니다. 자세한 내용은 externalsType을 참고하세요.

string

externalsType에 따라 전역 변수('global', 'this', 'var', 'window')의 이름이 될 수 있습니다. 또는 모듈 이름 (amd, commonjs, module, umd)을 참고하세요.

1개의 외부 속성만 정의하는 경우에도 축약된 구문을 사용할 수 있습니다.

module.exports = {
  //...
  externals: 'jquery',
};

이는 아래와 동일합니다.

module.exports = {
  //...
  externals: {
    jquery: 'jquery',
  },
};

${externalsType} ${libraryName} 구문을 사용하여 외부에 외부 라이브러리 유형을 지정할 수 있습니다. 이는 externalsType옵션에 지정된 기본 외부 라이브러리 유형을 재정의합니다.

예를들어 외부 라이브러리가 CommonJS 모듈인 경우, 다음과 같이 지정할 수 있습니다.

module.exports = {
  //...
  externals: {
    jquery: 'commonjs jquery',
  },
};

[string]

module.exports = {
  //...
  externals: {
    subtract: ['./math', 'subtract'],
  },
};

subtract: ['./math', 'subtract']을 사용하면 모듈의 일부를 선택할 수 있으며, 여기서 ./math는 모듈이고 번들에는 subtract 변수 아래의 하위 집합만 필요합니다. 이 예제는 require('./math').subtract;로 번역됩니다.

object

module.exports = {
  //...
  externals: {
    react: 'react',
  },

  // 또는

  externals: {
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_', // 전역 변수를 나타냅니다.
    },
  },

  // 또는

  externals: {
    subtract: {
      root: ['math', 'subtract'],
    },
  },
};

이 구문은 외부 라이브러리를 사용할 수 있는 모든 가능한 방법을 설명하는 데 사용됩니다. 여기서 lodash는 AMD 및 CommonJS 모듈 시스템에서 lodash로 사용할 수 있지만 전역 변수 형식에서는 _로 사용할 수 있습니다. 여기서 subtract는 전역 math 객체 아래의 subtract 속성을 통해 사용할 수 있습니다. (예. window['math']['subtract'])

function

function ({ context, request, contextInfo, getResolve }, callback)
function ({ context, request, contextInfo, getResolve }) => promise 5.15.0+

webpack에서 외부화하려는 동작을 제어하기 위해 자체 함수를 정의하는 것이 유용할 수 있습니다. 예를 들어 webpack-node-externals는, node_modules 디렉터리에서 모든 모듈을 제외하고 패키지를 허용 목록에 추가하는 옵션을 제공합니다.

함수가 받을 수 있는 인수는 다음과 같습니다.

ctx (object): 파일 세부 정보를 포함하는 객체입니다.
- ctx.context (string): import를 포함하는 파일의 디렉터리입니다.
- ctx.request (string): 요청 중인 import 경로입니다.
- ctx.contextInfo (object): issuer(예. 레이어, 컴파일)에 대한 정보를 포함합니다.
- ctx.getResolve 5.15.0+: 현재 리졸브 옵션으로 리졸브 함수 가져오기.
callback (function (err, result, type)): 모듈을 외부화하는 방법을 나타내는 데 사용되는 콜백 함수입니다.

콜백 함수는 세 가지 인수를 사용합니다.

err (Error): import를 외부화하는 동안 오류가 있었는지 나타내는 데 사용됩니다. 오류가 있는 경우 이 파라미터만 사용해야 합니다.
result (string [string] object): 다른 외부 형식(string, [string], 또는 object)를 사용하여 외부 모듈을 설명합니다.
type (string): 모듈 external type을 나타내는 선택적 파라미터입니다(result 파라미터에 아직 표시되지 않은 경우).

예를들어, import 경로가 정규 표현식과 일치하는 모든 import를 외부화 하려면 다음을 수행할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  externals: [
    function ({ context, request }, callback) {
      if (/^yourregex$/.test(request)) {
        // 요청 경로를 사용하여 commonjs 모듈로 외부화
        return callback(null, 'commonjs ' + request);
      }

      // import를 외부화하지 않고 계속
      callback();
    },
  ],
};

다른 모듈 형식을 사용하는 다른 예제입니다.

webpack.config.js

module.exports = {
  externals: [
    function (ctx, callback) {
      // external은 `@scope/library`에 있는 `commonjs2` 모듈입니다.
      callback(null, '@scope/library', 'commonjs2');
    },
  ],
};

webpack.config.js

module.exports = {
  externals: [
    function (ctx, callback) {
      // external은 `nameOfGlobal`이라는 전역 변수입니다.
      callback(null, 'nameOfGlobal');
    },
  ],
};

webpack.config.js

module.exports = {
  externals: [
    function (ctx, callback) {
      // external은 `@scope/library` 모듈에서 명명된 export입니다.
      callback(null, ['@scope/library', 'namedexport'], 'commonjs');
    },
  ],
};

webpack.config.js

module.exports = {
  externals: [
    function (ctx, callback) {
      // external은 UMD 모듈입니다.
      callback(null, {
        root: 'componentsGlobal',
        commonjs: '@scope/components',
        commonjs2: '@scope/components',
        amd: 'components',
      });
    },
  ],
};

RegExp

주어진 정규식과 일치하는 모든 의존성은 출력 번들에서 제외됩니다.

webpack.config.js

module.exports = {
  //...
  externals: /^(jquery|\$)$/i,
};

이 경우, jQuery, 대문자 여부, 또는 $라는 종속성이 외부화됩니다.

Combining syntaxes

때때로 위의 구문을 조합하여 사용할 수 있습니다. 다음과 같은 방식으로 수행할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  externals: [
    {
      // String
      react: 'react',
      // Object
      lodash: {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_', // 전역 변수를 나타냅니다.
      },
      // [string]
      subtract: ['./math', 'subtract'],
    },
    // Function
    function ({ context, request }, callback) {
      if (/^yourregex$/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },
    // Regex
    /^(jquery|\$)$/i,
  ],
};

이 설정을 사용하는 방법에 대한 자세한 내용은, 라이브러리 작성 방법에 대한 문서를 참고하십시오.

byLayer

function object

레이어별로 external을 지정합니다.

webpack.config.js

module.exports = {
  externals: {
    byLayer: {
      layer: {
        external1: 'var 43',
      },
    },
  },
};

externalsType

string = 'var'

기본 외부 유형을 지정합니다. amd, umd, system 그리고 jsonp external은 output.libraryTarget이 동일한 값으로 설정되는 것에 의존합니다. 예. amd 라이브러리 내에서만 amd external을 사용할 수 있습니다.

지원 유형:

'amd'
'amd-require'
'assign' - same as 'var'
'commonjs'
'commonjs-module'
'global'
'import' - import()를 사용하여 네이티브 EcmaScript 모듈을 로드합니다(비동기 모듈)
'jsonp'
'module'
'import'
'module-import'
'node-commonjs'
'promise' - 'var'과 동일하지만, 결과를 기다립니다(비동기 모듈)
'self'
'system'
'script'
'this'
'umd'
'umd2'
'var'
'window'

webpack.config.js

module.exports = {
  //...
  externalsType: 'promise',
};

externalsType.commonjs

외부속성의 기본 유형을 'commonjs'로 지정합니다. Webpack은 모듈에서 사용되는 외부속성에 대해 const X = require('...')와 같은 코드를 생성합니다.

Example

import fs from 'fs-extra';

webpack.config.js

module.exports = {
  // ...
  externalsType: 'commonjs',
  externals: {
    'fs-extra': 'fs-extra',
  },
};

이는 다음과 같이 생성됩니다.

const fs = require('fs-extra');

출력 번들에 require()가 있다는 점을 유의하세요.

externalsType.global

외부 속성의 기본 유형을 'global'로 지정합니다. Webpack은 외부 속성을 globalObject의 전역 변수로 읽습니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'global',
  externals: {
    jquery: '$',
  },
  output: {
    globalObject: 'global',
  },
};

이는 다음과 같이 생성됩니다.

const jq = global['$'];
jq('.my-element').animate(/* ... */);

externalsType.module

외부의 기본 유형을 'module'로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소에 대해 import * as X from '...'와 같은 코드를 생성합니다.

우선 experiments.outputModule을 활성화해야 합니다. 그렇지 않으면 webpack에서 오류가 발생합니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  experiments: {
    outputModule: true,
  },
  externalsType: 'module',
  externals: {
    jquery: 'jquery',
  },
};

이는 다음과 같이 생성됩니다.

import * as __WEBPACK_EXTERNAL_MODULE_jquery__ from 'jquery';

const jq = __WEBPACK_EXTERNAL_MODULE_jquery__['default'];
jq('.my-element').animate(/* ... */);

출력 번들에 import 구문이 있다는 점을 유의하세요.

externalsType.import

5.94.0+

외부의 기본 유형을 '가져오기'로 지정합니다. Webpack은 모듈에 사용되는 외부에 대해 '가져오기('...')'와 같은 코드를 생성합니다.

Example

async function foo() {
  const jq = await import('jQuery');
  jq('.my-element').animate(/* ... */);
}

webpack.config.js

module.exports = {
  externalsType: 'import',
  externals: {
    jquery: 'jquery',
  },
};

아래와 같이 생성합니다.

var __webpack_modules__ = {
  jQuery: (module) => {
    module.exports = import('jQuery');
  },
};

// webpack 런타임...

async function foo() {
  const jq = await Promise.resolve(/* import() */).then(
    __webpack_require__.bind(__webpack_require__, 'jQuery')
  );
  jq('.my-element').animate(/* ... */);
}

출력 번들에는 'import()' 구문이 있습니다.

externalsType.module-import

5.94.0+

외부의 기본 유형을 module-import'`로 지정합니다. 이것은 [`'module'`](#externalstypemodule)과 [`'import'`](#externalstypeimport)를 결합합니다. Webpack은 자동으로 가져오기 구문의 유형을 감지하여 정적 가져오기의 경우 module'로, 동적 가져오기의 경우 ``import'로 설정합니다.

정적 가져오기가 있는 경우 먼저 experiments.outputModule을 활성화해야 합니다. 그렇지 않으면 webpack에서 오류가 발생합니다.

Example

import { attempt } from 'lodash';

async function foo() {
  const jq = await import('jQuery');
  attempt(() => jq('.my-element').animate(/* ... */));
}

webpack.config.js

module.exports = {
  externalsType: 'import',
  externals: {
    jquery: 'jquery',
  },
};

아래와 같이 생성됩니다.

import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from 'lodash';
const lodash = __WEBPACK_EXTERNAL_MODULE_jquery__;

var __webpack_modules__ = {
  jQuery: (module) => {
    module.exports = import('jQuery');
  },
};

// webpack 런타임...

async function foo() {
  const jq = await Promise.resolve(/* import() */).then(
    __webpack_require__.bind(__webpack_require__, 'jQuery')
  );
  (0, lodash.attempt)(() => jq('.my-element').animate(/* ... */));
}

출력 번들에는 import 또는 import() 문이 포함됩니다.

모듈이 import 또는 import()를 통해 임포트되지 않으면 webpack은 "module" 외부 유형을 폴백으로 사용합니다. 다른 종류의 외부를 폴백으로 사용하려면 externals 옵션에서 함수로 지정할 수 있습니다. 예를 들어 보겠습니다.

module.exports = {
  externalsType: "module-import",
  externals: [
    function (
      { request, dependencyType },
      callback
    ) {
      if (dependencyType === "commonjs") {
        return callback(null, `node-commonjs ${request}`);
      }
      callback();
    },
  ]

externalsType.node-commonjs

외부의 기본 유형을 'node-commonjs'로 지정하세요. Webpack은 모듈에서 사용되는 외부 요소를 로드하기 위한 require 함수를 구성하기 위해 'module'에서 createRequire를 가져올 것입니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.export = {
  experiments: {
    outputModule: true,
  },
  externalsType: 'node-commonjs',
  externals: {
    jquery: 'jquery',
  },
};

이는 다음과 같이 생성됩니다.

import { createRequire } from 'module';

const jq = createRequire(import.meta.url)('jquery');
jq('.my-element').animate(/* ... */);

출력 번들에 import 구문이 있다는 점을 유의하세요.

externalsType.promise

외부 속성의 기본 유형을 'promise'로 지정합니다. Webpack은 외부 속성을 전역변수('var'와 유사함)로 읽고 await 합니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'promise',
  externals: {
    jquery: '$',
  },
};

이는 다음과 같이 생성됩니다.

const jq = await $;
jq('.my-element').animate(/* ... */);

externalsType.self

외부 속성의 기본 유형을 'self'로 지정합니다. Webpack은 외부 속성을 self 객체의 전역 변수로 읽습니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'self',
  externals: {
    jquery: '$',
  },
};

이는 다음과 같이 생성됩니다.

const jq = self['$'];
jq('.my-element').animate(/* ... */);

externalsType.script

외부의 기본 유형을 'script'로 지정하세요. Webpack은 HTML의 <script> 요소로 미리 정의된 전역 변수를 노출하는 스크립트로 외부를 로드합니다. <script> 태그는 스크립트가 로드된 후 제거됩니다.

Syntax

module.exports = {
  externalsType: 'script',
  externals: {
    packageName: [
      'http://example.com/script.js',
      'global',
      'property',
      'property',
    ], // 프로퍼티는 선택 사항입니다.
  },
};

프로퍼티를 지정하지 않을 경우 바로 가기 구문을 사용할 수도 있습니다.

module.exports = {
  externalsType: 'script',
  externals: {
    packageName: 'global@http://example.com/script.js', // 여기엔 프로퍼티가 없습니다
  },
};

output.publicPath는 제공된 URL에 추가되지 않습니다.

Example

CDN에서 lodash를 로드해 보겠습니다.

webpack.config.js

module.exports = {
  // ...
  externalsType: 'script',
  externals: {
    lodash: ['https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js', '_'],
  },
};

그런 다음 코드에서 사용합니다.

import _ from 'lodash';
console.log(_.head([1, 2, 3]));

위의 예제 코드를 위해 다음과 같이 프로퍼티를 지정해야 합니다.

module.exports = {
  // ...
  externalsType: 'script',
  externals: {
    lodash: [
      'https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js',
      '_',
      'head',
    ],
  },
};

로컬 변수 head와 전역 window._는 import lodash를 사용할 때 노출됩니다.

import head from 'lodash';
console.log(head([1, 2, 3])); // 여기 로그는 1 입니다
console.log(window._.head(['a', 'b'])); // 여기 로그는 a 입니다

externalsType.this

외부 속성의 기본 유형을 'this'로 지정합니다. Webpack은 외부 속성을 this 객체의 전역 변수로 읽습니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'this',
  externals: {
    jquery: '$',
  },
};

이는 다음과 같이 생성됩니다.

const jq = this['$'];
jq('.my-element').animate(/* ... */);

externalsType.var

외부 속성의 기본 유형을 'var'로 지정합니다. Webpack은 외부 속성을 전역 변수로 읽습니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'var',
  externals: {
    jquery: '$',
  },
};

이는 다음과 같이 생성됩니다.

const jq = $;
jq('.my-element').animate(/* ... */);

externalsType.window

외부 속성의 기본 유형을 'window'로 지정합니다. Webpack은 외부 속성을 window 객체의 전역 변수로 읽습니다.

Example

import jq from 'jquery';
jq('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  // ...
  externalsType: 'window',
  externals: {
    jquery: '$',
  },
};

이는 다음과 같이 생성됩니다.

const jq = window['$'];
jq('.my-element').animate(/* ... */);

externalsPresets

object

특정 대상에 대한 외부 프리셋 설정을 활성화합니다.

Option	Description	Input Type
`electron`	`electron`, `ipc` 또는 `shell`과 같은 main 및 preload 컨텍스트에서 공통 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 `require()`를 통해 로드합니다.	boolean
`electronMain`	`app`, `ipc-main` 또는 `shell`과 같은 같은 주 컨텍스트에서 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 `require()`를 통해 로드합니다.	boolean
`electronPreload`	`web-frame`, `ipc-renderer` 또는 `shell`과 같은 사전 로드 컨텍스트에서 일렉트론 내장 모듈을 외부로 취급하고, 사용 시 require()를 통해 로드합니다.	boolean
`electronRenderer`	`web-frame`, `ipc-renderer` 또는 `shell`과 같은 렌더러 컨텍스트에서 일렉토론 내장 모듈을 외부로 취급하고, 사용 시 `require()`를 통해 로드합니다.	boolean
`node`	`fs`, `path` 또는 `vm`과 같은 node.js 내장 모듈을 외부 모듈로 취급하고, 사용 시 `require()`를 통해 로드합니다.	boolean
`nwjs`	`NW.js` 레거시 `nw.gui` 모듈을 외부 모듈로 취급하고, 사용 시 `require()`를 통해 로드합니다.	boolean
`web`	`http(s)://...` 그리고 `std:...`에 대한 참조를 외부로 취급하고, 사용 시 `import`를 통해 로드합니다 (청크의 다른 코드보다 먼저 외부가 실행되므로 실행 순서가 변경됩니다).	boolean
`webAsync`	`http(s)://...` 그리고 `std:...`에 대한 참조를 외부로 취급하고, 사용 시 `async import()`를 통해 로드합니다 (이 유형의 외부 모듈은 `async` 모듈이며, 실행에 다양한 영향을 미칩니다).	boolean

node.js 관련 프리셋으로 ES 모듈을 출력하려는 경우, webpack은 기본externalsType을 node-commonjs로 설정하여, require()를 사용하는 대신 require 함수를 구성하기 위해 createRequire를 사용합니다.

Example

node 프리셋을 사용하면 내장 모듈을 번들로 묶지 않고 외부 모듈로 취급하고 사용할 때 require()를 통해 로드합니다.

webpack.config.js

module.exports = {
  // ...
  externalsPresets: {
    node: true,
  },
};

Performance

이 옵션을 사용하면 webpack이 정해진 파일 제한을 초과하는 애셋과 엔트리 포인트에 대해 알릴 방법을 제어 할 수 있습니다. 이 기능은 webpack 성능 버짓의 아이디어에서 영감을 받았습니다.

`performance`

object

성능 힌트가 표시되는 방법을 설정합니다. 예를 들어 애셋이 250kb를 초과하면, webpack이 이를 알리는 경고를 표시합니다.

performance.assetFilter

function(assetFilename) => boolean

이 속성을 통해 webpack은 성능 힌트를 계산하는 데 사용되는 파일을 제어할 수 있습니다. 기본 기능은 다음과 같습니다.

function assetFilter(assetFilename) {
  return !/\.map$/.test(assetFilename);
}

다음과 같이 함수를 전달하여 속성을 재정의할 수 있습니다.

module.exports = {
  //...
  performance: {
    assetFilter: function (assetFilename) {
      return assetFilename.endsWith('.js');
    },
  },
};

위의 예에서는 .js 파일에 대한 성능 힌트만 제공합니다.

performance.hints

string = 'warning': 'error' | 'warning' boolean: false

힌트를 켜거나 끕니다. 또한 힌트가 발견되면 webpack에 오류나 경고를 표시하도록 합니다.

250kb를 초과하는 애셋이 생성된 경우입니다.

module.exports = {
  //...
  performance: {
    hints: false,
  },
};

힌트 경고 또는 오류가 표시되지 않습니다

module.exports = {
  //...
  performance: {
    hints: 'warning',
  },
};

큰 애셋을 알리는 경고가 표시됩니다. 개발 환경에서는 이처럼 사용하는 것을 권장합니다.

module.exports = {
  //...
  performance: {
    hints: 'error',
  },
};

큰 애셋을 알려주는 오류가 표시됩니다. 크기가 너무 커서 웹 페이지 성능에 영향을 미치는 프로덕션 번들을 배포하는 것을 방지하기 위해, 프로덕션 빌드 시에는 hints: "error"를 사용하는 것이 좋습니다.

performance.maxAssetSize

number = 250000

애셋은 webpack에서 내보낸 파일입니다. 이 옵션은 webpack이 개별 애셋 크기(단위:bytes)를 기준으로 성능 힌트를 내보낼 시기를 제어합니다.

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
  },
};

performance.maxEntrypointSize

number = 250000

엔트리 포인트는 특정 항목의 초기 로드 시간 동안 사용될 모든 애셋을 나타냅니다. 이 옵션은 webpack이 최대 엔트리 포인트 크기(단위:bytes)를 기준으로 성능 힌트를 내보낼 시기를 제어합니다.

module.exports = {
  //...
  performance: {
    maxEntrypointSize: 400000,
  },
};

Node

다음의 Node.js 옵션은 특정 Node.js globals을 폴리필할지 mock할지 설정합니다.

이 기능은 webpack 내부 NodeStuffPlugin 플러그인에서 제공합니다.

node

false object

webpack.config.js

module.exports = {
  //...
  node: {
    global: false,
    __filename: false,
    __dirname: false,
  },
};

node 옵션을 false로 설정하여 NodeStuffPlugin 플러그인을 완전히 끌 수 있습니다.

node.global

boolean 'warn'

이 객체의 정확한 동작은 Node.js 문서를 참고하세요.

옵션:

true: 폴리필 제공.
false: 아무것도 제공하지 않습니다. 이 객체를 예상하는 코드는 ReferenceError가 발생할 수 있습니다.
'warn': global을 사용할 때 경고 표시.

node.__filename

boolean 'mock' | 'warn-mock' | 'node-module' | 'eval-only'

옵션:

true: context 옵션에 상대적인 입력 파일의 dirname.
false: Webpack은 __filename 코드를 건드리지 않습니다. 즉 일반적인 Node.js __filename 동작이 있음을 의미합니다. Node.js 환경에서 실행할 때 출력 파일 이름입니다.
'mock': 고정값 '/index.js'.
'warn-mock': '/index.js'의 고정값을 사용하되 경고를 표시합니다.
node-module: output.module이 활성화되면 CommonJS 모듈의 __filename을 fileURLToPath(import.meta.url)로 바꿉니다.
'eval-only'

node.__dirname

boolean 'mock' | 'warn-mock' | 'node-module' | 'eval-only'

옵션:

true: context 옵션에 상대적인 입력 파일의 dirname.
false: Webpack은 __dirname 코드를 건드리지 않습니다. 즉 일반적인 Node.js __dirname 동작이 있음을 의미합니다. Node.js 환경에서 실행할 때 출력 파일 이름입니다.
'mock': 고정값 '/'.
'warn-mock': '/'의 고정값을 사용하되 경고를 표시합니다.
node-module: output.module이 활성화된 경우 CommonJS 모듈의 __dirname을 fileURLToPath(import.meta.url + "/..")로 바꿉니다.
'eval-only'

Stats

object string

stats 옵션을 사용하면 표시되는 번들 정보를 정확하게 제어할 수 있습니다. 번들 정보를 얻고 싶지만 전부에 대한 정보를 얻고자 하는 것은 아닐 것이기 때문에 quiet 또는 noInfo를 사용하지 않는 경우 좋은 절충안이 될 수 있습니다.

module.exports = {
  //...
  stats: 'errors-only',
};

Stats Presets

Webpack은 stats 출력에 사용할 수있는 특정 프리셋을 함께 제공합니다.

Preset	Alternative	Description
`'errors-only'`	none	에러가 발생할 때만 출력
`'errors-warnings'`	none	에러와 경고가 발생할 때만 출력
`'minimal'`	none	에러와 새로운 컴파일이 발생할 때만 출력
`'none'`	`false`	출력 없음
`'normal'`	`true`	표준 출력
`'verbose'`	none	모두 출력
`'detailed'`	none	`chunkModules`과 `chunkRootModules`을 제외하고 출력
`'summary'`	none	webpack 버전, 경고 횟수, 에러 횟수를 출력

Stats Options

stats 출력에서 보고 싶은 정보를 설정할 수 있습니다.

stats.all

정의되지 않은 경우 stats 옵션의 폴백입니다. 로컬 webpack의 기본값보다 우선시 됩니다.

module.exports = {
  //...
  stats: {
    all: undefined,
  },
};

stats.assets

boolean = true

애셋 정보 표시 여부를 stats에 알려줍니다. 이 정보를 숨기려면 stats.assets을 false로 설정하세요.

module.exports = {
  //...
  stats: {
    assets: false,
  },
};

stats.assetsSort

string = 'id'

주어진 필드를 기준으로 애셋을 정렬하도록 stats에 지시합니다. 모든 정렬 필드는 stats.assetsSort의 값으로 사용할 수 있습니다. 값에 !접두사를 사용하여 주어진 필드의 정렬 순서를 반대로 할 수 있습니다.

module.exports = {
  //...
  stats: {
    assetsSort: '!size',
  },
};

stats.assetsSpace

number = 15

표시되어야 하는 애셋의 수를 stats에 알려줍니다. 그룹인 경우 이 크기에 맞게 축소됩니다.

module.exports = {
  //...
  stats: {
    assetsSpace: 15,
  },
};

stats.builtAt

boolean = true

빌드 날짜 및 빌드 시간 정보를 추가할지 여부를 stats에 알려줍니다. 숨기려면 stats.builtAt을 false로 설정하세요.

module.exports = {
  //...
  stats: {
    builtAt: false,
  },
};

stats.cached

stats.cachedModules의 오래된 버전입니다.

stats.cachedAssets

boolean = true

캐시 된 애셋에 대한 정보를 추가할지 여부를 stats에 알려줍니다. stats.cachedAssets을 false로 설정하면 stats에 생성된 파일이 아닌 내보낸 파일만 표시됩니다.

module.exports = {
  //...
  stats: {
    cachedAssets: false,
  },
};

stats.cachedModules

boolean = true

빌드되지 않고 캐시 된 모듈에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    cachedModules: false,
  },
};

stats.children

boolean = true

children에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    children: false,
  },
};

stats.chunkGroupAuxiliary

boolean = true

청크 그룹에 보조 애셋을 표시합니다.

module.exports = {
  //...
  stats: {
    chunkGroupAuxiliary: false,
  },
};

stats.chunkGroupChildren

boolean = true

프리페치, 프리로드 된 청크 및 애셋 같은 청크 그룹의 하위 항목을 표시합니다.

module.exports = {
  //...
  stats: {
    chunkGroupChildren: false,
  },
};

stats.chunkGroupMaxAssets

number

청크 그룹에 표시되는 애셋의 제한.

module.exports = {
  //...
  stats: {
    chunkGroupMaxAssets: 5,
  },
};

stats.chunkGroups

boolean = true

namedChunkGroups에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    chunkGroups: false,
  },
};

stats.chunkModules

boolean = true

빌드된 모듈에 대한 정보를 청크에 대한 정보에 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    chunkModules: false,
  },
};

stats.chunkModulesSpace

number = 10

표시되어야 하는 청크 모듈의 수를 stats에 알려줍니다. 그룹인 경우 이 크기에 맞게 축소됩니다.

module.exports = {
  //...
  stats: {
    chunkModulesSpace: 15,
  },
};

stats.chunkOrigins

boolean = true

청크 및 청크 병합의 출처에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    chunkOrigins: false,
  },
};

stats.chunkRelations

boolean = false

stats에 청크의 부모, 자식 및 형제를 표시하도록 지시합니다.

module.exports = {
  //...
  stats: {
    chunkRelations: false,
  },
};

stats.chunks

boolean = true

청크에 대한 정보를 추가할지 여부를 stats에 알려줍니다. stats.chunks를 false로 설정하면 출력이 상세하게 표시되지 않습니다.

module.exports = {
  //...
  stats: {
    chunks: false,
  },
};

stats.chunksSort

string = 'id'

주어진 필드를 기준으로 청크를 정렬하도록 stats에 지시합니다. 모든 정렬 필드는 stats.chunksSort의 값으로 사용할 수 있습니다. 값에 !접두사를 사용하여 주어진 필드의 정렬 순서를 반대로 할 수 있습니다.

module.exports = {
  //...
  stats: {
    chunksSort: 'name',
  },
};

stats.colors

boolean = false object

다른 색상으로 출력할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    colors: true,
  },
};

CLI 플래그로도 사용할 수 있습니다.

npx webpack --stats-colors

비활성화하려면:

npx webpack --no-stats-colors

ANSI 이스케이프 시퀀스를 사용하여 자신만의 터미널 출력 색상을 지정할 수 있습니다.

module.exports = {
  //...
  colors: {
    green: '\u001b[32m',
  },
};

stats.context

string

stats 기본 디렉터리이며, 요청 정보를 단축하기 위한 절대경로 입니다.

const path = require('path');

module.exports = {
  //...
  stats: {
    context: path.resolve(__dirname, 'src/components'),
  },
};

기본적으로 context 또는 Node.js의 현재 작업 디텍터리 값이 사용됩니다.

stats.dependentModules

boolean

청크의 다른 모듈에 종속된 청크 모듈을 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    dependentModules: false,
  },
};

stats.depth

boolean = false

각 모듈의 엔트리 포인트로부터의 거리를 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    depth: true,
  },
};

stats.entrypoints

boolean = true string = 'auto'

대응하는 번들과 함께 엔트리 포인트를 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    entrypoints: false,
  },
};

stats.entrypoints가 'auto'로 설정되면 webpack은 stats 출력에 엔트리 포인트를 표시할지 여부를 자동으로 결정합니다.

stats.env

boolean = false

--env정보를 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    env: true,
  },
};

stats.errorDetails

boolean string = "auto"

에러에 세부 정보를 추가할지 여부를 stats에 알려줍니다. 기본값은 'auto'이며 에러가 2개 이하일 때 세부 정보를 표시합니다.

module.exports = {
  //...
  stats: {
    errorDetails: false,
  },
};

stats.errorStack

boolean = true

에러 스택 추적을 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    errorStack: false,
  },
};

stats.errors

boolean = true

에러를 표시할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    errors: false,
  },
};

stats.errorsCount

boolean = true

에러 횟수를 추가합니다.

module.exports = {
  //...
  stats: {
    errorsCount: false,
  },
};

stats.errorsSpace

5.80.0+

number

오류를 표시하기 위해 할당할 줄 수를 제한하도록 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    errorsSpace: 5,
  },
};

stats.exclude

stats.excludeModules을 참고하세요.

stats.excludeAssets

array = []: string | RegExp | function (assetName) => boolean string RegExp function (assetName) => boolean

일치하는 애셋 정보를 제외하도록 stats에 지시합니다. 이것은 string, RegExp, 애셋 이름을 인수로 받고 boolean을 반환하는 function로 수행할 수 있습니다. stats.excludeAssets는 위 요소를 원소로 가지는 배열일 수 있습니다.

module.exports = {
  //...
  stats: {
    excludeAssets: [
      'filter',
      /filter/,
      (assetName) => assetName.contains('moduleA'),
    ],
  },
};

stats.excludeModules

array = []: string | RegExp | function (assetName) => boolean string RegExp function (assetName) => boolean boolean: false

일치하는 모듈 정보를 제외하도록 stats에 지시합니다. 이는 string, RegExp, 모듈의 소스를 인자로 받고 boolean을 반환하는 function로 수행할 수 있습니다. stats.excludeModules는 위 요소를 원소로 가지는 배열일 수 있습니다. stats.excludeModules은 stats.exclude와 병합됩니다.

module.exports = {
  //...
  stats: {
    excludeModules: ['filter', /filter/, (moduleSource) => true],
  },
};

stats.excludeModules을 false로 설정하면 제외 동작이 비활성화됩니다.

module.exports = {
  //...
  stats: {
    excludeModules: false,
  },
};

stats.groupAssetsByChunk

boolean

애셋이 청크와 어떻게 관련되어 있는지에 따라 애셋을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupAssetsByChunk: false,
  },
};

stats.groupAssetsByEmitStatus

boolean

상태(방출, 방출을 위한 비교 또는 캐시)별로 애셋을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupAssetsByEmitStatus: false,
  },
};

stats.groupAssetsByExtension

boolean

확장자로 애셋을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupAssetsByExtension: false,
  },
};

stats.groupAssetsByInfo

boolean

애셋 정보(불변, 개발, hotModuleReplacement 등)별로 애셋을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupAssetsByInfo: false,
  },
};

stats.groupAssetsByPath

boolean

애셋 경로별로 애셋을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupAssetsByPath: false,
  },
};

stats.groupModulesByAttributes

boolean

속성(에러, 경고, 애셋, 선택적, 고아(orphan) 또는 종속)별로 모듈을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByAttributes: false,
  },
};

stats.groupModulesByCacheStatus

boolean

캐시 상태(캐시되었는지 혹은 빌드되고 캐시 가능한지)별로 모듈을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByCacheStatus: true,
  },
};

stats.groupModulesByExtension

boolean

확장자로 모듈을 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByExtension: true,
  },
};

stats.groupModulesByLayer

boolean

모듈을 레이어별로 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByLayer: true,
  },
};

stats.groupModulesByPath

boolean

모듈을 경로별로 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByPath: true,
  },
};

stats.groupModulesByType

boolean

모듈을 유형별로 그룹화할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    groupModulesByType: true,
  },
};

stats.groupReasonsByOrigin

boolean

5.46.0+

reasons를 원래 모듈별로 그룹화해 많은 reasons 세트가 생성되는 것을 방지합니다.

module.exports = {
  //...
  stats: {
    groupReasonsByOrigin: true,
  },
};

stats.hash

boolean = true

컴파일의 해시에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    hash: false,
  },
};

stats.ids

boolean = false

stats에 모듈과 청크의 id를 추가하도록 지시합니다.

module.exports = {
  //...
  stats: {
    ids: true,
  },
};

stats.logging

로깅 출력을 추가할지 여부를 stats에 알려줍니다.

'none', false - 로깅 비활성화
'error' - 에러
'warn' - 에러와 경고
'info' - 에러, 경고, 정보성 메시지
'log', true - 에러, 경고, 정보성 메시지, 로그 메시지, 그룹, 초기화. 접힌 그룹은 접힌 상태로 표시됩니다.
'verbose' - 디버그 및 추적을 제외한 모든 것을 기록합니다. 접힌 그룹은 펼쳐진 상태로 표시됩니다.

module.exports = {
  //...
  stats: {
    logging: 'verbose',
  },
};

stats.loggingDebug

array = []: string | RegExp | function (name) => boolean string RegExp function (name) => boolean

플러그인 또는 로더와 같은 지정된 로거의 디버그 정보를 포함하도록 stats에 지시합니다. stats.logging이 false로 설정되면 stats.loggingDebug 옵션이 무시됩니다.

module.exports = {
  //...
  stats: {
    loggingDebug: [
      'MyPlugin',
      /MyPlugin/,
      /webpack/, // 코어 로깅을 얻기 위해서
      (name) => name.contains('MyPlugin'),
    ],
  },
};

stats.loggingTrace

boolean = true

에러, 경고 및 추적에 대한 로깅 출력에서 스택 추적을 활성화합니다. 추적을 숨기려면 stats.loggingTrace를 설정하세요.

module.exports = {
  //...
  stats: {
    loggingTrace: false,
  },
};

stats.moduleAssets

boolean = true

모듈 내부에 애셋에 대한 정보를 추가할지 여부를 stats에 알려줍니다. 숨기려면 stats.moduleAssets을 false로 설정하세요.

module.exports = {
  //...
  stats: {
    moduleAssets: false,
  },
};

stats.moduleTrace

boolean = true

종속성과 경고/에러의 출처를 표시하도록 stats에 지시합니다. stats.moduleTrace는 webpack 2.5.0부터 사용할 수 있습니다.

module.exports = {
  //...
  stats: {
    moduleTrace: false,
  },
};

stats.modules

boolean = true

빌드된 모듈에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    modules: false,
  },
};

stats.modulesSort

string = 'id'

주어진 필드를 기준으로 모듈을 정렬하도록 stats에 지시합니다. 모든 정렬 필드는 stats.modulesSort의 값으로 사용할 수 있습니다. 값에 !접두사를 사용하여 주어진 필드의 정렬 순서를 반대로 할 수 있습니다.

module.exports = {
  //...
  stats: {
    modulesSort: 'size',
  },
};

stats.modulesSpace

number = 15

표시되어야 하는 모듈의 수를 stats에 알려줍니다. 그룹인 경우 이 크기에 맞게 축소됩니다.

module.exports = {
  //...
  stats: {
    modulesSpace: 15,
  },
};

stats.nestedModules

boolean

모듈 연결과 같이 다른 모듈에 중첩된 모듈에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    nestedModules: true,
  },
};

stats.nestedModulesSpace

number = 10

표시되어야 하는 중첩된 모듈의 수를 stats에 알려줍니다. 그룹인 경우 이 크기에 맞게 축소됩니다.

module.exports = {
  //...
  stats: {
    nestedModulesSpace: 15,
  },
};

stats.optimizationBailout

boolean

모듈에 대한 최적화가 중단된 이유를 보여주기 위해 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    optimizationBailout: false,
  },
};

stats.orphanModules

boolean = false

고아(orphan)모듈을 숨길 지 여부를 stats에 알려줍니다. 어느 청크에도 포함되지 않는 모듈은 고아(orphan)입니다. 고아(orphan) 모듈은 기본적으로 stats에서 숨겨져 있습니다.

module.exports = {
  //...
  stats: {
    orphanModules: true,
  },
};

stats.outputPath

boolean = true

stats에 outputPath를 표시하도록 지시합니다.

module.exports = {
  //...
  stats: {
    outputPath: false,
  },
};

stats.performance

boolean = true

파일 크기가 performance.maxAssetSize를 초과할 때 성능 힌트를 표시하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    performance: false,
  },
};

stats.preset

string boolean: false

표시되는 정보 유형에 대해 프리셋을 설정합니다. stats 동작 확장에 유용합니다.

module.exports = {
  //...
  stats: {
    preset: 'minimal',
  },
};

stats.preset의 값을 false로 설정하면 webpack이 'none' stats 프리셋을 사용하도록 지시합니다.

stats.providedExports

boolean = false

모듈의 export를 표시하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    providedExports: true,
  },
};

stats.publicPath

boolean = true

publicPath를 표시하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    publicPath: false,
  },
};

stats.reasons

boolean = true

모듈이 포함된 이유에 대한 정보를 추가하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    reasons: false,
  },
};

stats.reasonsSpace

number

5.46.0+

reasons를 표시할 공간입니다. 그룹은 이 공간에 맞게 축소됩니다.

module.exports = {
  //...
  stats: {
    reasonsSpace: 1000,
  },
};

stats.relatedAssets

boolean = false

애셋의 소스맵 같이 다른 애셋과 관련된 애셋에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    relatedAssets: true,
  },
};

stats.runtimeModules

boolean = true

런타임 모듈에 대한 정보를 추가할지 여부를 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    runtimeModules: false,
  },
};

stats.source

boolean = false

stats에 모듈의 소스 코드를 추가하도록 지시합니다.

module.exports = {
  //...
  stats: {
    source: true,
  },
};

stats.timings

boolean = true

stats에 타이밍 정보를 추가하도록 지시합니다.

module.exports = {
  //...
  stats: {
    timings: false,
  },
};

stats.usedExports

boolean = false

모듈의 어떤 export가 사용되는지 표시할지 여부를 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    usedExports: true,
  },
};

stats.version

boolean = true

사용된 webpack 버전에 대한 정보를 추가하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    version: false,
  },
};

stats.warnings

boolean = true

경고를 추가하도록 stats에 지시합니다.

module.exports = {
  //...
  stats: {
    warnings: false,
  },
};

stats.warningsCount

boolean = true

경고 횟수를 추가합니다.

module.exports = {
  //...
  stats: {
    warningsCount: false,
  },
};

stats.warningsFilter

array = []: string | RegExp | function (warning) => boolean string RegExp function (warning) => boolean

주어진 필터와 일치하는 경고를 제외하도록 stats에 지시합니다. 이것은 string, RegExp, 인자로 경고를 받고 boolean을 반환하는 function으로 수행할 수 있습니다. stats.warningsFilter는 위 요소를 원소로 가지는 배열일 수 있습니다.

module.exports = {
  //...
  stats: {
    warningsFilter: ['filter', /filter/, (warning) => true],
  },
};

stats.warningsSpace

5.80.0+

number

경고를 표시하기 위해 할당할 줄 수를 제한하도록 stats에 알려줍니다.

module.exports = {
  //...
  stats: {
    warningsSpace: 5,
  },
};

Sorting fields

assetsSort, chunksSort 및 modulesSort의 경우 항목을 정렬할 수 있는 몇 가지 필드가 있습니다.

'id' - 항목의 id
'name' - 가져올 때 설정된 항목의 이름
'size' - 바이트 단위의 항목 크기
'chunks' - 항목이 생성된 청크(예를 들어, 하나의 청크에 여러 개의 하위 청크가 있는 경우 하위 청크는 기본 청크에 따라 함께 그룹화 됨)
'errors' - 항목의 에러 수
'warnings' - 항목의 경고 수
'failed' - 항목 컴파일 실패 여부
'cacheable' - 항목 캐시 가능 여부
'built' - 애셋 빌드 여부
'prefetched' - 애셋 프리페치 여부
'optional' - 애셋 선택 사항 여부
'identifier' - 항목의 식별자
'index' - 항목의 처리 인덱스
'index2'
'profile'
'issuer' - issuer의 식별자
'issuerId' - issuer의 id
'issuerName' - issuer의 이름
'issuerPath' - 전체 issuer 객체. 이 필드를 기준으로 정렬 할 필요는 없습니다.

Extending stats behaviours

'minimal'같은 사전 설정 중 하나를 사용하지만 일부 규칙을 재정의하는 경우, 원하는 stats.preset을 지정하고 사용자 지정 또는 추가 규칙을 추가하면 됩니다.

webpack.config.js

module.exports = {
  //..
  stats: {
    preset: 'minimal',
    moduleTrace: true,
    errorDetails: true,
  },
};

Experiments

experiments

boolean: false

사용자가 실험적 기능을 활성화하고 시험해 볼 수 있는 권한을 부여하기 위해 experiments 옵션이 webpack 5에 도입되었습니다.

사용 가능한 옵션은 다음과 같습니다.

asyncWebAssembly: 업데이트된 사양에 따라 새로운 웹 어셈블리를 지원하여, 웹 어셈블리 모듈을 비동기 모듈로 만듭니다. 그리고 experiments.futureDefaults가 true로 설정되면 기본적으로 활성화됩니다.
backCompat
buildHttp
cacheUnaffected
css
futureDefaults
layers: 모듈 및 청크 레이어를 활성화합니다.
lazyCompilation
outputModule
syncWebAssembly: webpack 4에서와 같이 이전 웹 어셈블리를 지원합니다.
topLevelAwait

webpack.config.js

module.exports = {
  //...
  experiments: {
    asyncWebAssembly: true,
    buildHttp: true,
    layers: true,
    lazyCompilation: true,
    outputModule: true,
    syncWebAssembly: true,
    topLevelAwait: true,
  },
};

experiments.backCompat

다수의 webpack 4 API에 대한 지원 중단 경고와 함께 이전 버전과 호환되는 레이어를 활성화합니다.

Type: boolean

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

experiments.buildHttp

활성화되면, webpack은 http(s): 프로토콜로 시작하는 원격 리소스를 빌드할 수 있습니다.

Type:

(string | RegExp | ((uri: string) => boolean))[]

experiments.buildHttp.allowedUris의 바로가기입니다.

HttpUriOptions

{
  allowedUris: (string|RegExp|(uri: string) => boolean)[],
  cacheLocation?: false | string,
  frozen?: boolean,
  lockfileLocation?: string,
  upgrade?: boolean
}

사용 가능: 5.49.0+

예제

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: true,
  },
};

// src/index.js
import pMap1 from 'https://cdn.skypack.dev/p-map';
// `buildHttp`가 활성화되면, webpack은 일반 로컬 모듈처럼 pMap1을 빌드합니다.
console.log(pMap1);

experiments.buildHttp.allowedUris

허용된 URI 목록입니다.

Type: (string|RegExp|(uri: string) => boolean)[]

Example

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: {
      allowedUris: [
        'http://localhost:9990/',
        'https://raw.githubusercontent.com/',
      ],
    },
  },
};

experiments.buildHttp.cacheLocation

원격 리소스를 캐싱할 위치를 정의합니다.

Type
- string
- false

Example

// webpack.config.js
module.exports = {
  //...
  experiments: {
    buildHttp: {
      cacheLocation: false,
    },
  },
};

기본적으로 webpack은 캐싱을 위해 <compiler-name.>webpack.lock.data/를 사용하지만, 값을 false로 설정하여 비활성화할 수 있습니다.

프로덕션 빌드 중에는 네트워크 요청이 이루어지지 않으므로 experiments.buildHttp.cacheLocation 아래의 파일을 버전 제어 시스템에 커밋해야 합니다.

experiments.buildHttp.frozen

원격 리소스 및 잠금 파일을 고정합니다. 잠금 파일 또는 리소스 내용을 수정하면 오류가 발생합니다.

Type: boolean

experiments.buildHttp.lockfileLocation

잠금 파일을 저장할 위치를 정의합니다.

Type: string

기본적으로 webpack은 <compiler-name.>webpack.lock 파일>을 생성합니다. 프로덕션 빌드 동안 webpack은 잠금 파일에서 http(s): 프로토콜로 시작하는 모듈을 빌드하고 experiments.buildHttp.cacheLocation 아래에 캐시합니다.

experiments.buildHttp.proxy

원격 리소스를 가져오는 데 사용할 프록시 서버를 지정합니다.

Type: string

기본적으로 webpack은 http_proxy(대소문자 구분 안함) 환경 변수에서 원격 리소스를 가져오는 데 사용할 프록시 서버를 지정합니다. 하지만 proxy 옵션을 통해 지정할 수도 있습니다.

experiments.buildHttp.upgrade

원격 리소스의 변경 사항을 감지하고 자동으로 업그레이드합니다.

Type: boolean

experiments.css

네이티브 CSS 지원을 활성화합니다. 아직 개발 중인 실험적인 기능이고 webpack v6에서 기본적으로 활성화될 예정이지만, GitHub에서 진행 상황을 확인할 수 있습니다.

Type: boolean

실험적 기능:

CSS 모듈 지원: webpack은 각 CSS 클래스에 대해 고유한 이름을 생성합니다. CSS 모듈에는 .module.css 확장자를 사용하세요.
5.87.0+ package.json 파일의 스타일별 필드 해석 webpack은 package.json 파일에서 style 필드를 찾고 CSS 파일 내부에 import를 위해 존재하는 경우 이 파일을 사용합니다.

예를 들어 CSS 파일에 @import 'bootstrap';을 추가하면 webpack은 node_modules에서 bootstrap을 찾고 거기에서 package.json의 style 필드를 사용합니다. style 필드가 없으면 webpack은 이전 버전과의 호환성을 유지하기 위해 main 필드를 대신 사용합니다.
CSS 파일에 대한 콘텐츠 해시: webpack은 CSS 파일에 대한 콘텐츠 해시를 생성하고 파일 이름에 사용합니다. 이는 장기 캐싱에 유용합니다.
CSS 추출: webpack은 CSS를 별도의 파일로 추출합니다. 이 기능은 네이티브 지원을 제공하기 때문에 mini-css-extract-plugin 및 css-loader의 필요성을 대체합니다.
CSS import: webpack은 CSS import를 생성된 CSS 파일로 인라인합니다.
Hot Module Reload (HMR): webpack은 CSS 파일용 HMR을 지원합니다. 이는 CSS 파일에 대한 변경 사항이 전체 페이지를 다시 로드하지 않고 브라우저에 반영된다는 것을 의미합니다.

experiments.cacheUnaffected

변경되지 않은 모듈의 추가 인메모리 캐싱을 활성화하고 변경되지 않은 모듈만 참조합니다.

Type: boolean

기본값은 futureDefaults의 값입니다.

experiments.futureDefaults

다음 webpack 메이저 버전의 기본값을 사용하고 문제가 있는 위치에 경고를 표시합니다.

webpack.config.js

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

experiments.lazyCompilation

엔트리 포인트와 동적 import는 사용 중일 때만 컴파일하세요. Web 또는 Node.js에 사용할 수 있습니다.

Type

boolean

object

{
  // 커스텀 백엔드 정의
  backend?: ((
    compiler: Compiler,
    callback: (err?: Error, api?: BackendApi) => void
  ) => void)
    | ((compiler: Compiler) => Promise<BackendApi>)
    | {
      /**
      * 커스텀 클라이언트
      */
      client?: string;

      /**
      * 서버에 수신할 위치를 지정합니다.
      */
      listen?: number | ListenOptions | ((server: Server) => void);

      /**
      * 클라이언트가 서버에 연결하는 데 사용해야 하는 프로토콜을 지정합니다.
      */
      protocol?: "http" | "https";

      /**
      * EventSource 요청을 처리하는 서버를 생성하는 방법을 지정합니다.
      */
      server?: ServerOptionsImport | ServerOptionsHttps | (() => Server);
    },
  entries?: boolean,
  imports?: boolean,
  test?: string | RegExp | ((module: Module) => boolean)
}

backend: 백엔드를 커스터마이즈 합니다.
entries: 엔트리에 대한 지연 컴파일을 활성화합니다.
imports 5.20.0 + : 동적 import에 대해 지연 컴파일을 사용합니다.
test 5.20.0+: 어떤 import 모듈을 지연 컴파일할지 지정합니다.

Available: 5.17.0+

Example 1:

module.exports = {
  // …
  experiments: {
    lazyCompilation: true,
  },
};

Example 2:

module.exports = {
  // …
  experiments: {
    lazyCompilation: {
      // 동적 import에 대한 지연 컴파일 비활성화
      imports: false,

      // 엔트리에 대한 지연 컴파일 비활성화
      entries: false,

      // moduleB를 지연 컴파일하지 마세요
      test: (module) => !/moduleB/.test(module.nameForCondition()),
    },
  },
};

experiments.outputModule

boolean

활성화되면, webpack은 가능할 때마다 ECMAScript 모듈 구문을 출력합니다. 예를 들어, import()를 사용하여 청크를 로드하면, ESM은 청크 데이터를 노출하기 위해 export 합니다.

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

experiments.topLevelAwait

boolean = true

topLevelAwait 옵션은 await가 최상위 수준에서 사용될 때 모듈을 async 모듈로 변환합니다. Webpack 버전 5.83.0부터는 이 기능이 기본적으로 활성화됩니다. 그러나 그 이전 버전에서는 'experiments.topLevelAwait'를 'true'로 설정하여 활성화할 수 있습니다.

module.exports = {
  experiments: {
    topLevelAwait: true,
  },
};

InfrastructureLogging

인프라 레벨의 로깅 옵션입니다.

infrastructureLogging.appendOnly

5.31.0+

boolean

기존 출력을 업데이트하는 대신 출력에 행을 추가합니다. 상태 메시지에 유용합니다. 이 옵션은 커스텀 console이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    appendOnly: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.status('first output'); // `appendOnly`가 활성화된 상태에서는 재정의되지 않습니다.
      logger.status('second output');
    },
  ],
};

infrastructureLogging.colors

5.31.0+

boolean

인프라 레벨의 로깅을 위해 다채로운 출력을 활성화합니다. 이 옵션은 커스텀 console이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    colors: true,
    level: 'verbose',
  },
  plugins: [
    (compiler) => {
      const logger = compiler.getInfrastructureLogger('MyPlugin');
      logger.log('this output will be colorful');
    },
  ],
};

infrastructureLogging.console

5.31.0+

Console

인프라 레벨의 로깅에 사용되는 콘솔을 커스터마이즈 합니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    console: yourCustomConsole(),
  },
};

infrastructureLogging.debug

string boolean = false RegExp function(name) => boolean [string, RegExp, function(name) => boolean]

플러그인 또는 로더와 같은 지정된 로거의 디버그 정보를 활성화합니다. stats.loggingDebug 옵션과 유사하지만 인프라 용입니다. 기본값은 false입니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
    debug: ['MyPlugin', /MyPlugin/, (name) => name.contains('MyPlugin')],
  },
};

infrastructureLogging.level

인프라 로깅 출력을 활성화합니다. stats.logging 옵션과 유사하지만 인프라 용입니다. 기본값은 'info' 입니다.

Possible values:

'none' - 로깅을 비활성화
'error' - 에러
'warn' - 에러와 경고
'info' - 에러, 경고 및 정보 메시지
'log' - 에러, 경고, 정보 메시지, 로그 메시지, 그룹, 삭제. 접힌 그룹은 접힌 상태로 표시됩니다.
'verbose' - 디버그 및 추적을 제외한 모든 것을 기록합니다. 접힌 그룹은 펼쳐진 상태로 표시됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    level: 'info',
  },
};

infrastructureLogging.stream

5.31.0+

NodeJS.WritableStream = process.stderr

출력 로깅에 사용되는 스트림입니다. 기본값은 process.stderr입니다. 이 옵션은 커스텀 console이 제공되지 않은 경우에만 사용됩니다.

webpack.config.js

module.exports = {
  //...
  infrastructureLogging: {
    stream: process.stderr,
  },
};

Other Options

webpack에서 지원하는 나머지 설정 옵션들이 있습니다.

amd

object boolean: false

require.amd 또는 define.amd의 값을 설정합니다. amd를 false로 설정하면 webpack AMD 지원이 비활성화됩니다.

webpack.config.js

module.exports = {
  //...
  amd: {
    jQuery: true,
  },
};

jQuery 1.7.0 ~ 1.9.1 같이 AMD로 작성된 특정 인기 모듈은 로더가 페이지에 포함되는 여러 버전에 대해 특별한 허용을 받았다고 표시하는 경우에만 AMD 모듈로 등록됩니다.

허용되는 기능은 등록을 특정 버전으로 제한하거나 정의된 모듈이 다른 다양한 샌드박스를 지원하는 기능이었습니다.

이 옵션을 사용하면 모듈이 찾는 키를 정확한 값으로 설정할 수 있습니다. 이 경우 webpack의 AMD 지원은 정의된 이름을 무시합니다.

bail

boolean = false

넘어가지 않고 첫 번째 오류에서 실패합니다. 기본적으로 webpack은 HMR을 사용할 때 브라우저 콘솔뿐만 아니라 터미널에 이러한 오류를 빨간색으로 기록하지만 번들링을 계속합니다. 아래와 같이 활성화합니다.

webpack.config.js

module.exports = {
  //...
  bail: true,
};

이렇게 하면 webpack은 번들링 프로세스를 종료합니다.

dependencies

[string]

의존하는 모든 형제 설정을 정의하는 name 목록입니다. 먼저 의존하는 설정을 컴파일해야 합니다.

감시 모드에서 디펜던시는 다음과 같은 경우 컴파일러를 무효화합니다.

디펜던시가 변경된 경우
디펜던시가 현재 컴파일 중이거나 유효하지 않은 경우

현재 설정은 의존하는 디펜던시가 완료될 때까지 컴파일되지 않습니다.

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

ignoreWarnings

[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]

특정 경고를 무시하도록 webpack에 지시합니다. 이것은 WebpackError 및 Compilation을 인수로 받고 boolean를 반환하는 원시 경고 인스턴스를 기반으로 경고를 선택하는 커스텀 function, RegExp 그리고 아래의 프로퍼티를 가지는 object가 될 수 있습니다.

file : 경고에 대한 원본 파일을 선택하는 RegExp입니다.
message : 경고 메시지를 선택하는 RegExp입니다.
module : 경고에 대한 원본 모듈을 선택하는 RegExp입니다.

ignoreWarnings은 위의 항목 일부 또는 전체를 갖는 배열이어야 합니다.

module.exports = {
  //...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // A RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    /warning from compiler/,
    (warning) => true,
  ],
};

loader

object

사용자 정의 값을 loader context에 노출합니다.

예를들면, loader context에 새 변수를 정의할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  loader: {
    answer: 42,
  },
};

그런 다음 로더에서 이 값을 가져오기 위해 this.answer를 사용하세요.

custom-loader.js

module.exports = function (source) {
  // ...
  console.log(this.answer); // `42`를 기록합니다.
  return source;
};

name

string

설정의 이름입니다. 여러 설정을 로드할 때 사용됩니다.

webpack.config.js

module.exports = {
  //...
  name: 'admin-app',
};

parallelism

number = 100

병렬 처리되는 모듈의 수를 제한하세요. 성능을 미세하게 조정하거나 보다 안정적인 프로파일링 결과를 얻는 경우 사용할 수 있습니다.

profile

boolean

통계 및 힌트를 포함하여 애플리케이션의 "프로필"을 캡처 한 다음 분석 도구를 사용하여 분석 할 수 있습니다. 또한 모듈 타이밍에 대한 요약도 기록합니다.

recordsInputPath

string

마지막 레코드 세트를 읽을 파일을 지정하세요. 레코드 파일의 이름을 바꾸는 데 사용할 수 있습니다. 아래 예제를 참고하세요.

recordsOutputPath

string

레코드를 작성해야하는 위치를 지정하세요. 다음 예제는 이 옵션을 recordsInputPath와 함께 사용하여 레코드 파일의 이름을 바꾸는 방법을 보여줍니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsInputPath: path.join(__dirname, 'records.json'),
  recordsOutputPath: path.join(__dirname, 'newRecords.json'),
};

recordsPath

string

이 옵션을 사용하여 여러 빌드에서 모듈 식별자를 저장하는 경우 사용되는 데이터 조각인 webpack "레코드"를 포함하는 JSON 파일을 생성합니다. 이 파일을 사용하여 빌드간에 모듈이 변경되는 방식을 추적할 수 있습니다. 생성하려면 위치를 지정하기 만하면 됩니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  recordsPath: path.join(__dirname, 'records.json'),
};

레코드는 코드 스플리팅을 활용하는 복잡한 설정이 있는 경우 특히 유용합니다. 분할된 번들이 필요한 캐싱 동작을 달성하는지 확인할 수 있습니다.

snapshot

object

snapshot 옵션은 파일 시스템 스냅샷을 만들고 무효화하는 방법을 결정합니다.

webpack.config.js

const path = require('path');
module.exports = {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, '../node_modules')],
    immutablePaths: [],
    unmanagedPaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

buildDependencies

object = { hash boolean = true, timestamp boolean = true }

영구 캐시를 사용할 때 빌드 디펜던시에 대한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

hash와 timestamp 모두 선택사항입니다.

{ hash: true }: 타임 스탬프를 유지하지 않고 해시를 사용하는 새로운 체크 아웃으로 CI 캐싱에 적합합니다.
{ timestamp: true }: 로컬 개발 캐싱에 적합합니다.
{ timestamp: true, hash: true }: 위에서 언급 한 두 경우 모두 좋습니다. 타임 스탬프가 먼저 비교되는데, 이는 webpack이 해시를 계산하기 위해 파일을 읽을 필요가 없기 때문에 비용이 저렴합니다. 콘텐츠 해시는 타임 스탬프가 동일한 경우에만 비교되므로 초기 빌드에서 약간의 성능 저하가 발생합니다.

immutablePaths

(RegExp | string)[]

패키지 관리자가 관리하고 경로에 버전 또는 해시를 포함하여 모든 파일을 변경할 수 없는 경로 배열입니다.

정규식을 사용하는 경우 캡처 그룹의 경로를 래핑해야 합니다.

managedPaths

(RegExp | string)[]

패키지 관리자가 관리하고 수정되지 않도록 신뢰할 수 있는 경로의 배열입니다.

정규식을 사용하는 경우 webpack이 경로를 추출할 수 있도록 캡처 그룹의 경로를 래핑해야 합니다. 예를 들어 여기에 node_modules 디렉터리와 일치시키기 위해 webpack 내부적으로 사용하는 RegExp가 있습니다.

/^(.+?[\\/]node_modules)[\\/]/

managedPaths의 일반적인 사용 사례는 node_modules에서 일부 폴더를 제외하는 것입니다. 예를 들어, node_modules/@azure/msal-browser 폴더의 파일이 변경될 것으로 예상된다는 것을 webpack에 알리고자 합니다. 이는 아래와 같은 정규식으로 수행할 수 있습니다.

module.exports = {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

unmanagedPaths

5.90.0+

(RegExp | string)[]

패키지 관리자가 관리하지 않는 경로의 배열과 내용은 변경될 수 있습니다.

정규 표현식을 사용하는 경우 경로를 캡처 그룹으로 감싸야 합니다.

module

object = {hash boolean = true, timestamp boolean = true}

모듈 빌드를 위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

resolve

object = {hash boolean = true, timestamp boolean = true}

요청 해석을 위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

resolveBuildDependencies

object = {hash boolean = true, timestamp boolean = true}

영구 캐시를 사용할 때 빌드 디펜던시를 해석하기위한 스냅샷입니다.

hash: 콘텐츠 해시를 비교하여 무효화를 확인합니다(timestamp보다 비용이 많이 들지만 자주 변경되지 않음).
timestamp: 타임 스탬프를 비교하여 무효화를 확인합니다.

Edit this page·Print this page