webpack 개념 3.모드 Mode

모드 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 를 설정하지 않음

Mode: development 

// 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") }),
- ]
}

Mode: production 

// 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()
-  ]
}

Mode: none 

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

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement