Jaehyun's Dev Story

공부해서 남준다.

3. webpack plugin

Posted on In Disqus:

webpack은 여러 개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.
플러그인(plugin)는 로더는 파일 단위로 처리하는 반면 플러그인은 번들 된 결과물을 처리한다.

커스텀 플러그인 만들기

플러그인을 사용하기 전에 커스텀 플러그인을 만들어서 확인해 보자.

customPlugin.js 생성

customPlugin.js
1
2
3
4
5
6
7
8
9
class CustomPlugin {
    apply(compiler) {
        compiler.hooks.done.tap("Custom Plugin", stats => {
            console.log("Hello World");
        })
    }
}

module.exports = CustomPlugin;
  • 로더와 다르게 플러그인은 클래스로 작성해야 한다. 플로그인 작업이 완료되는 시점에 console.log("Hello World"); 함수 호출

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
const CustomPlugin = require("./src/customPlugin.js");

module.exports = {
    plugins: [
        new CustomPlugin(),
    ]
}

커스텀 플러그인 실행 결과 확인

1
$ npm run build

BannerPlugin

BannerPlugin은 웹팩으로 빌드 한 결과물에 정보를 입력할 수 있다.

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const webpack = require("webpack");
const childProcess = require("child_process");

module.exports = {
    plugins: [
        new customPlugin(),
        new webpack.BannerPlugin({
            banner: () =>
                `commitVersion: ${childProcess.execSync("git rev-parse --short HEAD")}` +
                `Build Date: ${new Date().toLocaleString()}\n` +
                `Author: ${childProcess.execSync("git config user.name")}`
        })
    ]
}
  • 빌드 날짜, 커밋 해쉬, 빌드 한 유저 정보 추가

BannerPlugin 빌드

1
$ npm run build

  • ./dist/main.js에 BannerPlugin을 이용한 정보를 확인

DefinePlugin

DefinePlugin은 개발 환경과 운영 환경의 API서버 주소가 다르기 때문에 빌드를 할 때 명령어로 개발 관련, 운영 관련 환경으로 빌드를 하게 한다.

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            VERSION: JSON.stringify("v.1.2.3"),
            PRODUCTION : process.env.NODE_ENV === "production" ? JSON.stringify(true) : JSON.stringify(false),
            MAX_COUNT: JSON.stringify(999),
            "api.domain": process.env.NODE_ENV === "production" ? JSON.stringify("http://prod.api.domain.com") : JSON.stringify("http://dev.api.domain.com"),
        })
    ]
}
  • process.env.NODE_ENV 웹팩 빌드 시 설정한 값에 따라 운영, 개발 환경 변경

app.js에 추가

app.js
1
2
3
4
console.log(VERSION) // "v.1.2.3"
console.log(PRODUCTION) // true or false
console.log(MAX_COUNT) // 999
console.log(api.domain) // "http://prod.api.domain.com" or "http://dev.api.domain.com"

DefinePlugin 빌드

  1. 운영 빌드
1
$ NODE_ENV=production npm run build

  1. 개발 빌드
1
$ NODE_ENV=development npm run build

HtmlWebpackPlugin

HtmlWebpackPlugin은 빌드 타입 값을 넣거나 코드를 압축하여 HTML 파일을 후처리하는데 사용한다.

HtmlWebpackPlugin 설치

1
$ npm install -D html-webpack-plugin

src/index.html 수정

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document<%= env %></title>
</head>
<body>
    <!-- 로딩 스크립트 제거 -->
    <!-- <script src="../dist/main.js"></script> -->
</body>
</html>
  • title태그에 <%= env %> ejs 문법을 이용하여 웹팩에 빌드 한 결과물을 자동으로 로딩하여 코드에 주입해 준다.

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html", // 템플릿 경로를 지정
            templateParameters: { // 템플릿에 주입할 파라매터 변수 지정
                env: process.env.NODE_ENV === "development" ? "(개발용)" : ""
            },
            minify: process.env.NODE_ENV === "production" ? {
                collapseWhitespace: true, // 빈칸 제거
                removeComments: true, // 주석 제거
            } : false,
            hash: true, // 정적 파일을 불러올때 쿼리문자열에 웹팩 해쉬값을 추가
        }),
    ]
}

HtmlWebpackPlugin 빌드

  1. 운영 빌드
1
$ NODE_ENV=production npm run build

  • 빈칸 제거, 주석 제거, 정적 파일 로딩 시 해쉬값을 추가
  1. 개발 빌드
1
$ NODE_ENV=development npm run build

빌드 된 결과물은 ./dist/index.html에서 확인하면 된다.

CleanWebpackPlugin

CleanWebpackPlugin은 빌드 이전 결과물을 삭제하는 플러그인이다.

CleanWebpackPlugin 설치

1
$ npm install -D clean-webpack-plugin

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ]
}

CleanWebpackPlugin 빌드

  • 빌드 전

  • 빌드 후

빌드 후 small.png파일에 삭제된 것을 확인할 수 있다.

MiniCssExtractPlugin

MiniCssExtractPlugin은 하나의 자바스크립트의 결과물로 만드는 것이 아니라, 스타일시트 코드만 뽑아 CSS 파일을 만들어 주는 플러그인이다.

MiniCssExtractPlugin 설치

1
$ npm install -D mini-css-extract-plugin

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    process.env.NODE_ENV === "production"
                        ? MiniCssExtractPlugin.loader // 운영 환경
                        : "style-loader", // 개발 환경
                        "css-loader"
                ],
            }
        ]
    },
    plugins: [
        ...(
            process.env.NODE_ENV === "production"
                ? [ new MiniCssExtractPlugin({filename: "[name].css"}) ]
                : []
        ),
    ]
}
  • 운영환경일 경우에만 css 파일을 추출하는 플러그인을 적용하였다.

MiniCssExtractPlugin 빌드

  1. 운영 빌드
1
$ NODE_ENV=production npm run build

./dist/main.css가 생성되었고 index.html에 파일을 로딩하는 코드를 추가

  1. 개발 빌드
1
$ NODE_ENV=development npm run build

소스코드

참조