[Webpack] 웹팩 설정 파일을 mode (development & production) 별로 분리하는 방법에 대해 알아보자!

💡 우리가 개발을 하다보면 개발 환경에서의 설정 파일 내용과 프로덕션 환경에서의 설정 내용이 다른 경우가 굉장히 많은 편이다. 따라서 대부분의 경우, 개발용 설정 파일과 프로덕션용 설정 파일을 분리해아할 상황이 생긴다! 때문에 이를 정리해보려고 한다.

mode 옵션

• 웹팩 설정 파일 내 mode 옵션을 사용하면 설정을 구분해서 작성할 수 있다.

• mode 옵션의 종류에는 develop, production(기본값), none 3개가 있다.

• mode 옵션을 CLI에 적용하는 방법

webpack --mode=development

• mode 옵션을 설정 파일에 적용하는 방법

// webpack.development.config.js
module.exports = {
  mode: 'developmenet'
}

mode 별 설정 파일 분리

• 이전 까지 작성했던 설정 파일을 개발용과 프로덕션용으로 분리해보는 작업을 진행할 것이다.

// webpack.development.config.js

module.exports = {
  mode: "development",
  entry: "./src/js/index.js",
  plugins: [new HtmlWebpackPlugin({ template: "index.html" })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: ["file-loader"],
      },
    ],
  },
  devtool: "eval-source-map",
  devServer: {
    host: "0.0.0.0",
    port: 8000,
    status: "errors-warnings",
  },
};

// webpack.production.config.js

module.exports = {
  mode: "production",
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "[name].[contethash].js",
    environment: {
      arrowFunction: false,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "index.html" }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: ["file-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

• 각 모드에서 필요한 옵션과 공통으로 사용되는 옵션을 분리해 작성해주었다.

// webpack.config.js (모드에 따라 설정 파일 사용하도록)

const developmentConfig = require("./webpack.development.config");
const productionConfig = require("./webpack.production.config");

module.exports = (env, { mode }) => {
  return mode === "production" ? productionConfig : developmentConfig;
};

• 분리해준 다음에는 두 설정 파일을 mode 옵션 값에 따라 적절히 사용하도록 공통 설정 파일에 작성해주면 된다.

mode에 따라 번들링 실행할 수 있도록 커스텀 명령어 작성

// package.json

{
  "scripts": {
    "build:dev": "webpack --config webpack.config.js --mode=development",
    "build:prod": "webpack --config webpack.config.js --mode=production"
  }
}

• --mode 로 넘긴 값이 위의 코드 속 mode 매개변수의 값으로 들어간다.

커스텀 명령어로 번들링 실행

npm run build:dev

npm run build:prod

이렇게 해서 웹팩에 대해 알아보았다. 다음에는 Babel에 대해서 알아보는 시간을 가질 것이다.