📚 웹팩 시작하기 ! 02 (자주 사용하는 플러그인)

안녕하세요 오늘은 웹팩에서 자주 사용하는 플러그인에 대해서 알아보려고 합니다 ! 총 5가지가 있구요. 기능부터 알아봅시다 :)

 

• 🐥 BannerPlugin : 번들링 된 결과물 상단에다가 빌드 정보를 추가하는 역할이다. 잘 배포 되었는지 확인해보는 용도
• 🐥 DefinePlugin : API 서버 주소를 넣음 좋다.
• 🐥 HtmlTemplatePlugin : 이 플러그인은 동적으로 생성되는 자바스크립트와 css 그리고 빌드 타임에 결정되는 값들을 템플릿 파일에 넣어서 html파일을 동적으로 만들어낸다.
• 🐥 CleanWebpackPlugin : src 경로에 있던 파일들을 빌드하면 dist 폴더에 남는다. 근데 src 폴더에 있는 파일을 삭제해도 dist 폴더에 남아있다. 그래서 얘는 src폴더와 dist폴더에 있는 값들이 비례하게 빌드할 때마다 dist에 남아있는 파일이나 폴더들을 제거해주는 역할이다.
• 🐥 MiniCssExtractPlugin : 번들된 자바스크립트 파일에서 css만 따로 뽑아내서 css파일만 만들어 내는 플러그인이다.

 

---

플러그인도 [webpack.config.js] 웹팩 환경설정 파일에 설정 할 수 있고, 로더처럼 사용하시면 됩니다. 

const path = require("path");
const webpack = require("webpack");
const childProcess = require("child_process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

하지만 로더와 다른 점이 플러그인은 상단에 설치한 플러그인들을 import 해줘야 합니다.

 

1. BannerPlugin

결과물에 빌드 정보나 커밋 버전 같은 걸 추가할 수 있어요. 배포 했을 때 배포가 잘 됐는지 이걸 통해 확인해요.

plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
      Author: 이현주(LeeHyunJu)
      `,
    }),
    ]

입력하고 빌드 했을 시 dist/main.js에 가면 banner 함수에 입력된 내용들이 나타납니다.

•  Build Date: ${new Date().toLocaleString()}  👉🏻 오늘 날짜를 뽑아내줍니다.
•  Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")} 👉🏻 커밋 네임
•  Author: 이현주(LeeHyunJu) 👉🏻 작성자

 

빌드 된 내용

 

2. DefinePlugin

어플리케이션은 개발환경과 운영환경으로 나눠서 운영됩니다. 환경에 따라 API 서버 주소가 다를 수 있어요. 같은 소스 코드를 두 환경에 배포하기 위해서 이런 환경 의존적인 정보를 소스가 아닌 곳에 관리하는 것이 좋습니다. 이러한 환경을 제공하기 위해 DefinePlugin를 제공합니다.

 new webpack.DefinePlugin({
      TWO: JSON.stringify("1+1"),
      "api.domain": JSON.stringify("http://dev.api.domain.com"),
    }),

 

api.domain을 문자열 넣고 싶을 때는 이렇게 출력합니다.

 

3. HtmlTemplatePlugin

html 파일을 후처리 하는데 사용합니다. 빌드 타임의 값을 넣거나 코드를 압축할 수 있습니다. 

npm install html-webpack-plugin
npm install html-webpack-plugin@4

이 플러그인은 웹팩의 기본 패키지가 아니라 따로 설치해 줘야합니다. 패키지 설치 후 버전이 안맞는다면 @4 이런식으로 버전을 맞춰 설치해주시면 됩니다. 얘를 사용하면 좀 더 유동적으로 html을 만들어 낼 수 있어요. 개발버전과 운영버전 두 가지 버전으로 관리가 가능하답니다.

    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "(개발용)" : "",
      },
      //불필요한 용량들을 제거해주는거
      minify:
        process.env.NODE_ENV === "procution"
          ? {
              collapseWhitespace: true, //빈칸 제거
              removeComments: true, //주석 제거
            }
          : false,
    }),

 

html에는 title에 <title>Document <%=env %></title> 이렇게 ejs 문법을 사용하면 개발용인지 배포용인지 빌드를 통해 출력됩니다. 그리고  HtmlTemplatePlugin에는 minify 라는 속성도 제공해줘서 불필요한 용량들을 제거해 최소화 시켜줍니다. collapseWhitespace는 빈칸 제거를 의미하고 removeComments는 주석제거를 의미합니다.

 

4. CleanWebpackPlugin

빌드 결과물은 아웃풋 경로에 모이는데 과거 파일이 남아 있을 수 있습니다. 이전 빌드 내용이 덮어지면 상관 없지만 그렇지 않으면 아웃풋 폴더에 여전히 남아 있을 수 있습니다. 그래서 이 플러그인은 제거되고 사라진 과거 파일들을 빌드하면서 없애주는 역할을 합니다.

npm install html-webpack-plugin

 

이 플러그인은 다른 플러그인과 다르게 상단에 { } 중괄호를 넣어 가져와야 합니다.

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

 

사용 법은 정말 간단해요 !

new CleanWebpackPlugin(),

이게 끝입니다 😄

 

4. MiniCssExtractPlugin

여러 CSS를 하나의 CSS로 만들어주는 플러그인 입니다. 그리고 이 플러그인은 다른 플러그인과 다르게 modules에서 loader도 설정해 주어야 합니다.

new MiniCssExtractPlugin({ filename: "[name].css" }),

플러그인 사용법

 

module: {
    rules: [
      {
        test: /\.css$/,
        👉🏻 use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      
 (...)

모듈에 플러그인 사용하기

 

 

그 외에도 

webpack.js.org/plugins/

Plugins | webpack

웹팩 공식문서에 다양한 플러그인들이 제공되오니 사용하고 싶은 기능들을 잘 살펴보시고 사용하시길 바랍니다 ㅎㅎ

 

 

 

자주 사용하는 플러그인 종류에 대해서 마치겠습니다 ! 👻