mode란 무엇인가?

웹팩 버전 4이상에서 추가된 속성이다.

크게 development, production, none 모드 3가지가 있다.

 

development

개발모드를 의미하며 코드가 압축되지 않은 상태이며 난독화가 되지 않은 상태이다.

부트스트랩이 적용된 프로젝트를 해당 mode로 빌드한 후 브라우저에 접속할 경우 콘솔에 다음과 같은 경고문이 생길 수 있다.

이럴 경우 경고문에 뜬 해당 경로에 있는 파일을 열람하여 다음 코드를 주석처리하거나 지우면 된다.

// bootstrap.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자!

// //# sourceMappingURL=bootstrap.js.map

// poper.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자!


// //# sourceMappingURL=poper.js.map

 

production

배포모드를 의미하며 코드가 압축된 상태이며 기본으로 js파일을 난독화해준다.

이 배포모드를 실행하면 번들링 파일의 크기가 확연히 줄어든다.

(개인적으로 필자는 개발모드에서 배포모드로 번들링한 결과 번들링 파일의 크기가 1/5로 줄어들었다.)

 

none

mode 설정이 되지 않았으며 development와 비슷한 상태이다.

mode의 값을 설정하지 않으면 기본값이 production 모드이니 주의하자!

한편 웹팩으로 애플리케이션을 개발할 때 mode의 development와 production을 구분하여 작업을 한다고 한다.

그렇기 때문에 기존에 webpack.config.js로 사용했던 웹팩 설정 파일을 mode에 따라서 웹팩 설정 파일을 분리할 필요가 있다.

이때 여러 개의 웹팩 설정 파일을 하나로 병합하여 마치 webpack.config.js파일만을 사용하는 듯한 효과를 주는 라이브러리가 webpack-merge라는 모듈이다.

 

webpack-merge 셋팅 방법

해당 라이브러리를 다음과 같이 다운로드한다.

npm install --save-dev webpack-merge

여러 파일을 나눌때 흔히 쓰는 설정파일의 이름은 다음과 같다.

 

• webpack.common.js -> 설정파일에서 mode에 관계없이 웹팩 실행 시 꼭 필요한 코드들을 모아놓은 것
• webpack.dev.js -> 설정파일에서 개발모드에서만 사용하는 코드들을 모아놓은 것
• webpack.prod.js -> 설정파일에서 배포모드에서만 사용하는 코드들을 모아놓은 것

// webpack.common.js
const 변수명 = require('라이브러리명')
// ...
module.exports = {
  entry: ...,
  output: ...,
  plugins: ...
	// ...
}

 

//webpack.dev.js

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development', // 혹은 mode: 'none'
  // devServer을 사용할 경우
  devServer: ...
  // ...
});

 

개발용 설정파일에는 개발자 도구(예를 들어 sorurce map) 혹은 devServer같은 것들을 추가한다.

 

// webpack.prod.js

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production'
});

 

배포용 설정파일에는 배포하기 전 웹 리소스 최적화에 필요한 것들을 추가한다.

 

웹팩 실행 파일을 분리하게 되면 이제 webpack.config.js파일은 없기 때문에 npm으로 웹팩을 실행하려면

일일이 npm run webpack --config {웹팩실행파일명}을 입력하는 번거로운 점이 있다.

그렇기 때문에 package.json에서 간단하게 npm명령어를 커스터 마이징할 수 있다.

// package.json
{
  // ...
  "scripts": {
    // devServer를 사용할 경우
    // "develop": "webpack serve --config webpack.dev.js"
    // devServer를 사용하지 않는 경우 
    "dev": "webpack -w --config webpack.dev.js",
    "prod": "webpack -w --config webpack.prod.js"
  },
  // ...
}

 

이제 웹팩을 실행할 때 개발모드로 번들링하고자 한다면 npm run dev를 하면 되고 배포모드로 번들링하고자 한다면 npm run prod를 입력하면 된다.