[webpack-merge] 웹팩 설정 파일을 개발, 배포 따로 설정해보자

1. webpack-merge란?

webpack-merge는 웹 팩 설정 파일을 병합해주는 패키지입니다. 그렇다면 웹 팩 설정 파일을 병합했을 때 가지는 장점은 무엇일까요?

보통 webpack.config.js에서 개발, 배포 모드에 따라서 각각 로더, 플러그인... 등등 설정이 다른 경우가 있습니다. 그럴 때는 환경변수를 설정해서 isDev 변수 같은 것을 사용해 if 문으로 설정을 조절하는데요. 객관적으로 그런 코드들은 읽기가 어렵고 코드가 길어지기 때문에 가독성이 매우 떨어집니다.

그럴 때 개발, 배포 파일을 따로 분리해서 작성하는 방법은 없는 것일까요? 그럴 리가 없죠. 저희의 선배 개발자분들이 이미 만들어놓은 패키지가 존재합니다.

기본적인 구성요소는 common, dev, prod 세 가지의 파일을 작성하고 common에는 dev, prod 모드 둘 다에 적용되는 설정이며 dev는 개발환경에서만 사용되는 설정, prod 배포환경에서만 사용되는 설정입니다.

2. webpack-merge 사용해보기

1. webpack-merge 모듈을 설치

npm install -D webpack-merge

2. webpack.dev.js, webpack.prod.js 파일 작성

웹팩 설정 파일을 작성합니다. 예를 들어, 개발용 설정 파일 webpack.dev.js와 배포용 설정 파일 webpack.prod.js가 있다고 가정해 봅시다. merge의 첫 번째 인수는 초기 설정 파일이며 두 번째 인수는 초기 설정 파일에 추가할 설정입니다.

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval',
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
  },
});

• mode: development : 웹팩 모드를 개발 모드로 설정합니다. 이렇게 하면 개발 중에 유용한 디버깅 정보를 포함하게 됩니다.

• devtool: eval : 소스 맵 타입을 'eval'로 설정하여 빌드 속도를 높이고 디버깅을 쉽게 합니다.

• devServer : 웹팩 개발 서버에 대한 설정을 시작합니다.

  • historyApiFallback: true : 브라우저 히스토리 API를 사용하는 싱글 페이지 애플리케이션에서 404 응답을 대체하여 index.html로 리디렉션합니다.

  • port: 3000 : 개발 서버가 사용할 포트 번호를 3000으로 설정합니다.

  • hot: true : 핫 모듈 교체(HMR)를 활성화하여 런타임 중에 모듈을 교체할 수 있게 합니다. 이렇게 하면 전체 페이지를 새로 고치지 않고도 변경 사항을 확인할 수 있습니다.

이 설정 파일은 웹팩을 사용하여 개발 모드에서 프로젝트를 빌드하고 실행하는 데 도움이 됩니다. 기본 설정과 개발 전용 설정을 병합하여 효율적인 개발 환경을 구축할 수 있습니다.

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

module.exports = merge(common, {
  mode: 'production',
  devtool: 'hidden-source-map',
});

• devtool: 'hidden-source-map' 설정은 소스 맵을 생성하는 방법 중 하나입니다. 이 설정은 컴파일된 코드에 대한 소스 맵을 생성하지만, 번들된 JavaScript 파일의 맨 아래에 숨겨진 형태로 삽입됩니다. 이렇게 하면 브라우저에서 소스 맵을 볼 수 없으므로, 코드를 보호하면서 디버깅 정보를 제공할 수 있습니다.

• hidden-source-map 설정은 source-map 설정과 유사하지만, 브라우저에서 소스 맵이 노출되지 않아 보안에 더 안전합니다. 그러나 이 설정은 소스 맵이 컴파일 된 파일에 포함되지 않으므로 브라우저 개발자 도구에서 디버깅하기가 조금 더 어려울 수 있습니다. 이 설정은 보안이 중요한 프로젝트에서 유용합니다.

3. webpack.common.js 파일을 설정

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader'],
      }
      ]
  },

  output: {
    path: path.join(__dirname, '/build'),
    filename: 'bundle.js',
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      inject: true,
    }),
    new CleanWebpackPlugin(),
  ],
};

4. package.json 파일에 script를 수정

 "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack --config webpack.dev.js",
    ...
  },

• npm run dev : webpack-dev-server를 사용하며 설정 파일을 webpack.dev.js를 사용합니다.

• npm run build : 빌드를 실행하며 설정 파일을 webpack.dev.js를 사용합니다.

• npm run start : 빌드를 실행하며 설정 파일을 webpack.dev.js를 사용합니다.

이렇게 설정하시면 파일별로 개발, 배포 설정을 따로 설정할수가 있습니다.

3. webpack-merge 주의사항

webpack-merge 패키지를 사용하여 웹팩 설정을 병합할 때 다음과 같은 주의사항이 있습니다.

1. 웹팩 설정 파일을 올바르게 작성해야 합니다.

   • webpack-merge 패키지는 웹팩 설정 파일을 병합하는 기능을 제공합니다. 병합되는 설정 파일은 올바르게 작성되어야 합니다. 각 설정 파일이 병합될 때 예기치 않은 결과가 발생할 수 있습니다.

2. 병합 순서를 고려해야 합니다.

   • webpack-merge 패키지는 설정 파일을 병합할 때 마지막으로 전달된 설정 파일이 가장 우선순위가 높습니다. 따라서 병합 순서를 고려하여 설정 파일을 전달해야 합니다.

3. 병합된 설정 파일을 검증해야 합니다.

   • webpack-merge 패키지를 사용하여 병합된 설정 파일이 올바른지 확인해야 합니다. 병합된 설정 파일이 원하는 대로 작동하지 않을 수 있습니다.

이러한 주의사항을 염두에 두고 webpack-merge 패키지를 사용하면 웹팩 설정 파일을 효과적으로 관리할 수 있습니다.