모드
모드 (Mode)
mode 설정 옵션을 주면 webpack이 그에 맞는 내장 최적화를 적용해요. 값은 'none' | 'development' | 'production' 중 하나이며, 기본값은 'production'이에요.
출처: Webpack — Mode
사용법
설정 파일에서 mode 옵션을 주거나, CLI 인자로 넘길 수 있어요.
export default {
mode: "development",
}
webpack --mode=development
지원되는 값:
| 옵션 | 설명 |
|---|---|
production |
DefinePlugin에 process.env.NODE_ENV를 production으로 설정. 모듈/청크의 결정적 맹글드 이름, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, MinimizerPlugin을 활성화 |
none |
기본 최적화 옵션을 모두 끔 |
설정이나 CLI에서 mode를 주지 않으면 webpack은 production을 기본값으로 사용해요. CLI는 설정/CLI 어디에도 mode가 없으면 유효한 NODE_ENV 값을 mode로 사용해요.
개발/프로덕션 설정을 용도별로 분리하면 재사용하기 좋아요.
// webpack.development.config.js
export default { mode: "development" }
// webpack.production.config.js
export default { mode: "production" }
// 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;
}
이렇게 하면 같은 설정 파일에서 모드에 따라 다른 구성을 반환해서, dev와 prod의 빌드 동작을 한곳에서 관리할 수 있어요.