웹팩(Webpack) - 개발, 운영, 공통 파일 분리하여 관리하는 Webpack-merge 설치 및 활용

이 전 글에서 캐시 무효화를 알아보았습니다

못 보신 분이 계시다면

아래의 링크를 확인해보세요

 

2022.07.26 - 웹팩(Webpack) 번들링 파일 자동연결 기능 사용하기(캐시 무효화 문제 해결하기)

웹팩(Webpack) 번들링 파일 자동연결 기능 사용하기(캐시 무효화 문제 해결하기)

 

그 외에도 웹팩을 설정하기위한 단계별 포스팅이 있으니 참고 하시길바랍니다

그럼 본론으로 넘어가보겠습니다

 

 

---

 

Webpack-merge란?

 

이제 본론으로 넘어갑시다

앱을 개발이 끝나고 운영을 넘어가게 되면

개발과 운영을 분리하여 관리하는 게 더욱 효과적입니다

이때 웹팩에서 분리하여 관리가 가능합니다

 

이 작업을 위해서는 공통 파일과 다른 파일을 연동시키기 위한 새로운 라이브러리가 필요합니다

그것이 webpack-merge입니다

 

 

---

 

 

Webpack-merge 기능 활용 및 설정

아래와 같이 라이브러리를 설치합니다

 

npm i webpack-merge --save-dev

 

 

 

그리고 필요한 파일들을 생성합니다

webpack.common.js, webpack.dev.js, webpack.prod.js

 

 

 

 

webpack.common.js

이 파일은 웹팩의 초기 설정값을 담당합니다

common의 설정값을 dev, prod에게 merge를 하게 됩니다

 

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

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
    }),
  ],
};

 

 

 

 

webpack.dev.js

아래의 코드를 보면 common에서 설정된 플러그인과 entry, module 등이 없는 것을 확인할 수 있습니다

개발은 캐시 무효화가 필요 없기 때문에 캐시 무효화 기능은 삭제합니다

 

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

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
});

 

 

 

 

webpack.prod.js

아래의 코드에서 캐시무효화 작업이 포함된 것을 확인할 수 있습니다

 

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

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
});

 

 

 

 

package.json

package.json 코드를 수정합니다

개발의 소스코드와 운영의 소스코드를 개별적으로 관리하여

운영에서 필요한 소스코드를 우선적으로 개발에서 수정하여

테스트를 거쳐 사이드 이펙트가 있는지 확인하기 유용한 기능입니다

 

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

 

 

 

이렇게 개발, 운영을 분리하여 관리하는 

webpack-merge 기능의 설정하는 방법을 알아보았습니다

 

이번 웹팩 포스팅은 그렇게 길지 않아서 피로도가 그렇게 높지는 않네요

다음 포스팅은 개발 서버에서 코드가 변경될 경우 실시간으로 반영하는 기능과

빌드를 실행할 경우 CSS 파일 생성하여 로딩시간을 단축하는 방법을 알아보겠습니다

 

또 한,

아직 많은 기능들이 남아있으니

앞으로 많은 기대부탁드립니다

그럼 힘내시고 대모험을 즐겨 보아요~

 

파이팅!!