[ VanillaJS ] webpack5 - webpack-merge

webpack-merge

development와 production의 빌드 목표는 다르다.
따라서 webpack 설정을 분리하면 두 마리 토끼를 모두 잡을 수 있다

공식 홈페이지에서 정말 깔끔하게 정리가 되어 잇다.

development은 편리하게 개발하기 위해.
강력한 소스 매핑
hot 리로딩

production은 로드 시간을 줄이기 위해.
번들 최소화
가벼운 소스맵
asset 최적화

✨ 적용

yarn add -D webpack-merge

 - webpack.config.js
 + webpack.common.js
 + webpack.dev.js
 + webpack.prod.js

webpack.common.js 파일

공통된 빌드 내용을 작성한다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    home: "./client/pages/home.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "home.html",
    }),
  ],
};

webpack.prod.js 파일

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
});

최적화 관련 설정은 이후 시리즈에서 다루도록 하자.

webpack.dev.js 파일

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

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map", // 소스맵
  watch: true,
  watchOptions: {
    ignored: /node_modules/, // node_modules의 변화는 무시한다.
    aggregateTimeout: 600, // 빌드 후 600ms간 watch를 딜레이 한다.
    poll: 1000, // 1초마다 변화를 감지한다.
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
});

vscode에서 ts-error로 빨간줄 뜨면 여기 참고.

devtool 소스맵을 설정한다.
번들 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인할 수 있다. 프로덕션용에도 디버깅용으로 추가하는 경우도 있다.

개발모드, 배포모드의 환경변수를 웹팩에서 디폴트로 설정해준다.
client/pages/home.js

if (process.env.NODE_ENV !== "production") { // or develop
  console.log("[ 개발모드로 실행중 ]");
}

package.json

    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"

yarn build:dev

소스 코드를 변경하면 webpack이 이를 감지하고 바로 빌드를 시킨다.

express 연동

dev모드에서 webpack이 계속 실행되고 있어서 express를 별도의 터미널에서 띄워야 한다.
webpack과 express를 동시실행시키면 편할거 같다.

yarn add -D concurrently

package.json

  "scripts": {
    "dev": "concurrently \"yarn build:dev\" \"nodemon server/app.js\"",
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js",
    "serve": "node server/app.js",
    "start": "yarn build:prod && yarn serve"
  }

이제 코드를 수정하면 자동으로 webpack이 다시 빌드되고 express가 재실행된다.

🎉🎉

하지만 띄워진 웹페이지를 새로고침을 해줘야 하는 불편함이 있다.
hot load이 필요하다.