webpack 개념 3.모드 Mode

javascript/webpack

webpack 개념 3.모드 Mode

이브라히모비치 2018. 9. 26. 10:10

모드 Mode

mode 구성 옵션은 웹팩에 내장된 최적화를 사용하도록 지시한다.

string

사용 가능한 mode 값 : none , development , production(기본값)

사용법

config에 mode 옵션을 주는 방식

module.exports = {
  mode: 'production'
};

CLI를 이용

webpack --mode=production

지원하는 문자열 값

Option

development

Description

Sets process.env.NODE_ENV on DefinePlugin to value development. Enables NamedChunksPlugin and NamedModulesPlugin.

Option

production

Description

Sets process.env.NODE_ENV on DefinePlugin to value production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.

Option

none

Description

Opts out of any default optimization options

아무런 설정을 하지 않으면 웹팩은 production 을 디폴트로 셋팅한다.

주의 : NODE_ENV 는 자동으로 mode 를 설정하지 않음

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- devtool: 'eval',
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.NamedChunksPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

// webpack.custom.config.js
module.exports = {
+  mode: 'none',
-  plugins: [
-  ]
}

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