Plugin

티스토리 뷰

SW프로그래밍/FrontEnd 개발환경

Plugin

고랑이. 2022. 1. 18. 13:52

번들링 후 번들 파일이 생성되기 직전에 후처리를 하는 기능

번들파일 하나에 대해서 동작하고, 번들된 자바스크립트를 난독화 하거나 특정 텍스트를 추출하는 용도로 사용한다.

//my-webpack-plugin.js

class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", (stats) => {
       //plugin이 완료됬을 때 동작하는 callback 함수
       console.log("MyPlugin: done");
    });

    //번들 파일 후처리
    //webpack 내장 플러그인 BannerPlugin
    compiler.plugin("emit", (compilation, callback) => {
      //번들된 main.js 파일의 소스를 가져옴.
      const source = compilation.assets["main.js"].source(); 

      compilation.assets["main.js"].source = () => {
        const banner = [
          "/**",
          " * 이것은 BannerPlugin이 처리한 결과입니다.",
          " * Build Date: 2019-10-10",
          " */",
        ].join("\n");

        //원본 코드 상단에 리턴된 값이 포함됨(./dist/main.js 상단에 banner 내용이 입력됨)
        return banner + "\n" + source;
      };
      callback();
    });
  }
}

module.exports = MyWebpackPlugin;

//webpack.config.js

const myWebpackPlugin = require("./my-webpack-plugin");
module.exports = {
	...,
    plugins: [new MyWebpackPlugin()],
    ...
}

자주 사용하는 플러그인

BannerPlugin

- webpack이 기본으로 제공하는 플러그인

- 번들파일의 상단에 배너를 주석으로 입력한다.

- 정적파일들이 잘 배포되었는지, 캐시에 의해 생긴되지 않는지 확인할 때 사용하고,

빌드된 결과물의 빌드 정보나 커밋 버전 등을 입력한다.

//webpack.config.js

const webpack = require("webpack");
const childProcess = require("child_process");

plugins: [
    new webpack.BannerPlugin({
      banner: `
         build date : ${new Date().toLocaleString()}
         Commit Version :${childProcess.execSync(`git rev-parse --short HEAD`)}
         git username :${childProcess.execSync(`git config user.name`)}
      `,
    }),
  ],

위와같이 설정하면 ./dist/main.js의 최상단에 banner 정보가 주석으로 입력된다.

DefinePlugin

- webpack이 기본으로 제공하는 플러그인

- api주소 같은 환경 의존적인 변수를 코드가 아닌 다른곳에서 관리할 때 사용.

- 웹팩이 빌드될 때 process.env.NODE_ENV 환경변수를 입력한다.

//webpack.config.js
const webpack = require("webpack");

module.exports = {
	mode: "development",
	...,
    	plugins: [
            new webpack.DefinePlugin({
              TWO: "1+1",
              TwoStr: JSON.stringify("1+1"),
              "api.domain": JSON.stringify(`http://dev.api.domain.com`),
            }),
            //NODE_ENV.TWO = "1+1"
            //NODE_ENV.TwoStr = JSON.stringify("1+1")
            //NODE_ENV.api.domain = JSON.stringify(`http://dev.api.domain.com`)
          ],
    ...,
}

// app.js

console.log(process.env.NODE_ENV); //development (webpack.config.js의 mode 값)
console.log(TWO); //2
console.log(TwoStr); //'1+1'
console.log(api.domain); //http://dev.api.domain.com

HtmlTemplatePlugin

> npm install -D html-webpack-plugin

- 웹팩으로 빌드한 결과물을 자동으로 로딩하는 코드를 주입해 준다.

아래 index.html의 <script />부분

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document<%= env %></title>
  </head>
  <body>
    <!-- <script src="dist/main.js"></script> -->
  </body>
</html>

//webpack.config.js
module.exports = {
	...,
    plugins : {
    	new HtmlWebpackPlugin({
      	template: "./index.html",
      	templateParameters: {
        	env: process.env.NODE_ENV === "development" ? "(개발용)" : "",
      	},
      	minify:
        	process.env.NODE_ENV === "production"
          	? {
              	collapseWhitespace: true, //빈칸 제거
              	removeComments: true, //주석 제거
            	}
          	: false,
    	}),
    }
}

template : index.html을 번들파일로 지정. 빌드 후 ./dist/index.html 파일이 생성된다.
templateParameters : 환경변수에 따라 env변수의 값을 지정하고 번들파일의 html의 ejs 변수에 주입한다.
minify.collapseWhitespace : 번들파일의 빈칸을 제거
removeComments : 번들파일의 주석을 제거

> NODE_ENV=development npm run build

<!-- ./dist/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document(개발용)</title>
  </head>
  <body>
    <!-- <script src="dist/main.js"></script> -->
  <script type="text/javascript" src="main.js"></script></body>
</html>

CleanWebpackPlugin

빌드할 때 마다 output폴더 삭제하고 새로운 내용을 저장한다.

// webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
	...,
    plugins : [
    	...,
    	new CleanWebpackPlugin()
    ]
}

MiniCssExtractPlugin

> npm install -D mini-css-extract-plugin

번들 결과에서 스타일시트 코드만 분리하여 css 번들파일을 생성.
스타일 코드가 많아지면 하나의 번들파일로 만들었을 때 데이터가 많아지고 성능이 떨어지기 때문에 css파일을 따로 만들어 역할을 분담시킨다.

//webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
	...,
    module : {
    	rules : [
        	{
            	test : /\.css$/,
                test: /\.css$/,
                use: [
                  process.env.NODE_ENV === "production"
                    ? MiniCssExtractPlugin.loader // 번들파일에서 css파일 분리
                    : "style-loader", // css를 html inline형태로 사용
                  "css-loader",
                ]
            },
            ...
        ]
    },
    plugins : [
    	...,
        ...(process.env.NODE_ENV === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : []),
    ]
}

development환경일때에는 분리하지 않는게 빌드 속도가 빠르므로 production 환경에서만 사용
MiniCssExtractPlugin을 css loader 에 추가해야 사용할 수 있음.
./src의 css파일명 그대로 ./dist에 css 번들파일이 생성된다.

참고

- https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#5-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8

'SW프로그래밍 > FrontEnd 개발환경' 카테고리의 다른 글

[REACT] CRA_Typescript_Jest 설정하기 (0)	2022.07.06
Loader (0)	2022.01.17
Webpack (0)	2022.01.13
Module (0)	2022.01.13
NPM (0)	2022.01.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

Ellen's Web Note

티스토리 뷰

Plugin

자주 사용하는 플러그인

BannerPlugin

DefinePlugin

HtmlTemplatePlugin

CleanWebpackPlugin

MiniCssExtractPlugin

'SW프로그래밍 > FrontEnd 개발환경' 카테고리의 다른 글

티스토리툴바