웹팩 실행 모드 - mode

웹팩 버전 4부터 mode라는 개념이 추가되었다.

module.exports = {
  mode: 'none',
  entry: '',
  // ...
}

웹팩 설정을 정의할 때 위와 같이 mode라는 속성을 정의하면 웹팩의 실행 모드가 설정된다.

- none : 모드 설정 안함
- development : 개발 모드
- production : 배포 모드(기본값)

개발 모드인 경우에는 개발자들이 좀 더 보기 편하게 웹팩 로그나 결과물이 보여지고, 배포 모드인 경우에는 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가된다.

📌실행 모드에 따라 웹팩 설정 달리하기

웹팩으로 실제 웹 애플리케이션을 개발할 때는 보통 아래와 같이 2가지 케이스로 구분하여 작업해야 한다.

• 개발할 때 사용할 웹팩 설정
• 개발이 끝나고 배포할 때 사용할 웹팩 설정

📌웹팩 설정 파일이 1개인 상태에서 실행 모드에 따라 특정 설정을 적용하는 방법

// webpack.config.js
module.exports = (env) => {
  let entryPath = env.mode === 'production'
    ? './public/index.js'
    : './src/index.js';

  return {
    entry: entryPath,
    output: {},
    // ...
  }
}

// package.json
{
  "build": "webpack",
  "development": "npm run build -- --env.mode=development",
  "production": "npm run build -- --env.mode=production"
}

기존에 객체 형태였던 webpack.config.js를 화살표 함수 형태로 바꾸고, 함수에 넘겨준 env인자는 환경 변수를 의미하며 웹팩을 실행할 때 실행 옵션으로 넘겨줄 수 있다.

📌Webpack Merge

웹팩 머지는 단어 그대로 여러 개의 웹팩 설정 파일을 하나로 병합해주는 라이브러리이다. 실행 모드에 따라 조건문으로 설정을 구분할 수 있으나 실제로 파일을 아예 나눠놓는 게 더 권장하는 방식이다.

📌웹팩 설정 파일 구분하기

웹팩 머지를 효율적으로 사용하는 방법은 개발용과 배포용 설정 파일에서 공통으로 쓰이는 부분을 먼저 분리하는 것이다.

webpack.common.js // 공통 설정 파일
webpack.dev.js // 개발용 설정 파일
webpack.prod.js // 배포용 설정 파일

각 파일의 모습은 다음과 같다.

// webpack.common.js 공통 설정 파일
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),
  ],
}

공통 설정 파일에는 엔트리, 아웃풋, 플러그인과 같이 실행 모드에 관계 없이 항상 들어가야 하는 코드를 추가한다.

// webpack.dev.js 개발용 설정 파일
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: { contentBase: './dist' }
});

개발용 설정 파일에는 개발자 도구나 웹팩 데브 서버와 같은 설정을 추가한다. 그리고 webpack-merge 라이브러리를 설치 및 로딩하고 나서 웹팩 공통 설정 파일인 webpack.common.js파일을 로딩해서 같이 병합한다.

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

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

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

https://github.com/survivejs/webpack-merge

GitHub - survivejs/webpack-merge: Merge designed for webpack