모드 옵션을 사용시 웹팩에 내장된 최적화 된 기능을 사용할 수있다.
string = 'production' : 'none' | 'development' | 'production'옵션을 설명하자면 아래를 확인해 보자
development : DefinePlugin의 process.env.NODE_ENV를 development로 설정한다.
모듈과 청크에 유용한 이름을 사용할 수 있다.
production : DefinePlugin의 process.env.NODE_ENV를 production으로 설정한다.
모듈과 청크, FlagDependencyusagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 망글이름(mangled name)을 사용할 수 있다.
none : 기본 최적화 옵션에서 제외
- 모드를 설정하지 않을 경우 웹팩은 production을 mode의 기본값으로 설정한다.
이전에 번들링된 index_bundle.js 파일
(()=>{"use strict";document.querySelector("#root").innerHTML="hello word"})();
내용이 함축되어 있어 자세한 부분은 보이지 않는다.
이유는 모드를 설정하지 않아 배포용으로 되어 있기 때문이다.
이전에 작성한 설정파일 webpack.config.js module.exprot 안에 mode추가
const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
설정파일 module.export 내에 mode를 추가한다.
module.exports = {
mode: "development",
//개발
entry: "./source/index.js",
// 도입할 .js 위치
output: {
path: path.resolve(__dirname,"public"),
// dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
filename: 'index_bundle.js'
}
}
설정파일을 저장하고 난 뒤 터미널에 해당 명령어를 입력한다.
npx webpack
*번들링된 index_bundle.js 파일의 일부분 캡쳐
이제 번들링된 js파일을 세부적으로 확인을 할 수 있다.
