Mode

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

'none' | 'development' | 'production' = 'production'

Usage

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

export default {
  mode: "development",
};

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

webpack --mode=development

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

옵션	설명
`development`	`DefinePlugin`의 `process.env.NODE_ENV`를 `development` 값으로 설정합니다. 모듈과 청크에 유용한 이름을 사용할 수 있습니다.
`production`	`DefinePlugin`의 `process.env.NODE_ENV`를 `production` 값으로 설정합니다. 모듈과 청크, `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `MinimizerPlugin`에 대해 결정적인 mangled name을 사용할 수 있습니다.
`none`	기본 최적화 옵션을 사용하지 않습니다.

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

Defaults per mode

mode 자체가 어떤 작업을 수행하는 것은 아닙니다. 대신 다른 옵션의 기본값을 선택하며, 각 옵션은 명시적으로 설정할 수 있습니다. 다음은 기본값이 mode에 따라 달라지는 옵션입니다.

옵션	`development`	`production`	`none`
`cache`	`{ type: 'memory' }`	`false`	`false`
`devtool`	`'eval'`	`false`	`false`
`output.pathinfo`	`true`	`false`	`false`
`performance.hints`	`false`	`'warning'`	`false`
`optimization.chunkIds`	`'named'`	`'deterministic'`	`'natural'`
`optimization.moduleIds`	`'named'`	`'deterministic'`	`'natural'`
`optimization.nodeEnv`	`'development'`	`'production'`	`false`
`optimization.emitOnErrors`	`true`	`false`	`true`
`optimization.sideEffects`	`'flag'`	`true`	`'flag'`
`optimization.usedExports`	`false`	`true`	`false`
`optimization.innerGraph`	`false`	`true`	`false`
`optimization.mangleExports`	`false`	`true`	`false`
`optimization.concatenateModules`	`false`	`true`	`false`
`optimization.flagIncludedChunks`	`false`	`true`	`false`
`optimization.realContentHash`	`false`	`true`	`false`
`optimization.checkWasmTypes`	`false`	`true`	`false`
`optimization.minimize`	`false`	`true`	`false`

optimization.splitChunks 역시 mode에 따라 조정됩니다. minSize, enforceSizeThreshold, maxAsyncRequests, maxInitialRequests는 production에서 더 엄격하게 설정됩니다. 각 값은 SplitChunksPlugin을 참고하세요.

두 항목에는 조건이 있습니다. performance.hints는 브라우저 target에만 적용되며, 빌드가 ES 모듈 라이브러리를 출력하는 경우에는 development에서도 devtool이 false로 유지됩니다. experiments.css를 활성화하면 development에서 CSS 애셋의 기본값이 추가로 source-map으로 설정됩니다.

Mode: development

// webpack.development.config.js
export default {
  mode: "development",
};

Mode: production

// webpack.production.config.js
export default {
  mode: "production",
};

Mode: none

// webpack.custom.config.js
export default {
  mode: "none",
};

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

const config = {
  entry: "./app.js",
  // ...
};

export default (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "source-map";
  }

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

  return config;
};

6 Contributors

Translators

dkstyle