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 해야 합니다.

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

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

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

  return config;
};

6 Contributors

Translators

dkstyle