CustomWebpackPlugin

webpack@4 - plugin 2022.06.04

webpack@4 - plugin

2022. 6. 4. 15:09

webpack - plugin

플러그인

플러그인 역할

플러그인은 번들된 결과물을 처리 ( ↔ 로더는 파일 단위로 처리)

ex) 자바스크립트 난독화 , 특정 텍스트 추출

커스텀 플러그인

만들기

웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", stats => {
      console.log("MyPlugin: done")
    })
  }
}

module.exports = MyPlugin

webpack.config.js

const MyPlugin = require("./myplugin")

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

플러그인은 하나로 번들링된 결과물을 대상으로 동작하기 때문에 로그가 한번 찍힘

플러그인이 번들 결과에 접근하는 방법

웹팩 내장 플러그인 BannerPlugin 코드를 참고

→ compilation 객체를 이용해서 접근

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", stats => {
      console.log("MyPlugin: done")
    })

    // compiler.plugin() 함수로 후처리한다
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source()
      console.log(source)
      callback()
    })
  }
}

webpack 번들링된 결과물에 banner 추가해보기

myplugin.js

class MyPlugin {
  apply(compiler) {
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source();
      compilation.assets["main.js"].source = () => {
        const banner = [
          "/**",
          " * 이것은 BannerPlugin이 처리한 결과입니다.",
          " * Build Date 2022-06-04",
          " */",
        ].join("\\n");
        return banner + "\\n\\n" + source;
      };
      callback();
    });
  }
}
module.exports = MyPlugin;

자주 사용하는 플러그인

BannerPlugin

결과물에 빌드 정보나 커밋 버전 등 추가

빌드하고 배포했을때 정적파일들이 잘 배포되었는지 확인

webpack.config.js

const webpack = require("webpack");
const childProcess = require("child_process");
module.exports = {
...
  plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
      Author: ${childProcess.execSync("git config user.name")}
      `,
    }),
  ],
};

DefinePlugin

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

웹팩은 이러한 환경 정보를 제공하기 위해 DefinePlugin을 제공

webpack.config.js

const webpack = require("webpack")

export default {
  plugins: [
		new webpack.DefinePlugin({
      TWO: "1+1",
      THREE: JSON.stringify("1+1"),
      "api.domain": JSON.stringify("<http://dev.api.domain.com>"),
    }),
	],
}

app.js

console.log(process.env.NODE_ENV); // development
console.log(TWO); // 2
console.log(THREE); // 1+1
console.log(api.domain); // <http://dev.api.domain.com>

HtmlWebpackPlugin

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

이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.

→ 유동적으로 HTML 파일을 생성가능

$ npm install -D html-webpack-plugin

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>타이틀<%= env %></title>
  </head>
  <body>
    <!-- 로딩 스크립트 제거 -->
    <!-- <script src="dist/main.js"></script> -->
  </body>
</html>

<%= env %> 는 전달받은 env 변수 값을 출력한다. HtmlWebpackPlugin은 이 변수에 데이터를 주입시켜 동적으로 HTML 코드를 생성한다.

webpack.config.js

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, // 정적 파일을 불러올때 쿼리문자열에 웹팩 해쉬값을 추가한다
  ]
}

CleanWebpackPlugin

빌드 이전 결과물을 제거하는 플러그인 ( dist폴더 삭제 후 재생성)

npm install -D clean-webpack-plugin

webpack.config.js

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

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

MiniCssExtractPlugin

번들 결과에서 스타일시트 코드만 뽑아서 별도의 CSS파일로 만들어줌

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

webpack.config.js

production 환경일 경우만 이 플러그인을 추가 filename 에 설정한 값으로 아웃풋 경로에 생성
프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요

webpack - plugin

플러그인

플러그인 역할

플러그인은 번들된 결과물을 처리 ( ↔ 로더는 파일 단위로 처리)

ex) 자바스크립트 난독화 , 특정 텍스트 추출

커스텀 플러그인

만들기

웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", stats => {
      console.log("MyPlugin: done")
    })
  }
}

module.exports = MyPlugin

webpack.config.js

const MyPlugin = require("./myplugin")

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

플러그인은 하나로 번들링된 결과물을 대상으로 동작하기 때문에 로그가 한번 찍힘

플러그인이 번들 결과에 접근하는 방법

웹팩 내장 플러그인 BannerPlugin 코드를 참고

→ compilation 객체를 이용해서 접근

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", stats => {
      console.log("MyPlugin: done")
    })

    // compiler.plugin() 함수로 후처리한다
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source()
      console.log(source)
      callback()
    })
  }
}

webpack 번들링된 결과물에 banner 추가해보기

myplugin.js

class MyPlugin {
  apply(compiler) {
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source();
      compilation.assets["main.js"].source = () => {
        const banner = [
          "/**",
          " * 이것은 BannerPlugin이 처리한 결과입니다.",
          " * Build Date 2022-06-04",
          " */",
        ].join("\\n");
        return banner + "\\n\\n" + source;
      };
      callback();
    });
  }
}
module.exports = MyPlugin;

자주 사용하는 플러그인

BannerPlugin

결과물에 빌드 정보나 커밋 버전 등 추가

빌드하고 배포했을때 정적파일들이 잘 배포되었는지 확인

webpack.config.js

const webpack = require("webpack");
const childProcess = require("child_process");
module.exports = {
...
  plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
      Author: ${childProcess.execSync("git config user.name")}
      `,
    }),
  ],
};

DefinePlugin

웹팩은 이러한 환경 정보를 제공하기 위해 DefinePlugin을 제공

webpack.config.js

const webpack = require("webpack")

export default {
  plugins: [
		new webpack.DefinePlugin({
      TWO: "1+1",
      THREE: JSON.stringify("1+1"),
      "api.domain": JSON.stringify("<http://dev.api.domain.com>"),
    }),
	],
}

app.js

console.log(process.env.NODE_ENV); // development
console.log(TWO); // 2
console.log(THREE); // 1+1
console.log(api.domain); // <http://dev.api.domain.com>

HtmlWebpackPlugin

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

이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.

→ 유동적으로 HTML 파일을 생성가능

$ npm install -D html-webpack-plugin

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>타이틀<%= env %></title>
  </head>
  <body>
    <!-- 로딩 스크립트 제거 -->
    <!-- <script src="dist/main.js"></script> -->
  </body>
</html>

<%= env %> 는 전달받은 env 변수 값을 출력한다. HtmlWebpackPlugin은 이 변수에 데이터를 주입시켜 동적으로 HTML 코드를 생성한다.

webpack.config.js

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, // 정적 파일을 불러올때 쿼리문자열에 웹팩 해쉬값을 추가한다
  ]
}

CleanWebpackPlugin

빌드 이전 결과물을 제거하는 플러그인 ( dist폴더 삭제 후 재생성)

npm install -D clean-webpack-plugin

webpack.config.js

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

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

MiniCssExtractPlugin

번들 결과에서 스타일시트 코드만 뽑아서 별도의 CSS파일로 만들어줌

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

webpack.config.js

production 환경일 경우만 이 플러그인을 추가 filename 에 설정한 값으로 아웃풋 경로에 생성
프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요

※ 출저

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런...

www.inflearn.com

728x90

'Study > webpack' 카테고리의 다른 글

webpack@4 - lint,prettier (0)	2022.06.04
webpack@4 - babel - basic (0)	2022.06.04
webpack@4 - loader (0)	2022.06.04
webpack@4 - 엔트리/아웃풋 (0)	2022.06.04
webpack@4 - basic (0)	2022.06.04

PREV 1 NEXT

devlog

CustomWebpackPlugin

webpack@4 - plugin

webpack - plugin

플러그인

플러그인 역할

커스텀 플러그인

만들기

플러그인이 번들 결과에 접근하는 방법

webpack 번들링된 결과물에 banner 추가해보기

자주 사용하는 플러그인

BannerPlugin

DefinePlugin

HtmlWebpackPlugin

CleanWebpackPlugin

MiniCssExtractPlugin

webpack - plugin

플러그인

플러그인 역할

커스텀 플러그인

만들기

플러그인이 번들 결과에 접근하는 방법

webpack 번들링된 결과물에 banner 추가해보기

자주 사용하는 플러그인

BannerPlugin

DefinePlugin

HtmlWebpackPlugin

CleanWebpackPlugin

MiniCssExtractPlugin

'Study > webpack' 카테고리의 다른 글

+ Recent posts

티스토리툴바