webpack 자주 사용하는 플러그인

BannerPlugin

웹팩에서 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전, 만든이 등과 같은 정보를 추가할 수 있다.

 

webpack.ocnfig.js

plugins: [
    new webpack.BannerPlugin({
      banner: `build time : ${new Date().toLocaleTimeString()}`,
    }),

 

DefinePlugin

웹팩에서 제공하는 플러그인으로 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해 사용된다.

기본적으로 DefinePlugin을 빈 객체를 전달하여도 노드 환경정보인 process.env.NODE_ENV에 값을 넣어준다. console.log(process.env.NODE_ENV) 했을 경우 해당 webpack.config.js 에 있는 mode(development, production) 의 값을 가져온다.

 

webpack.ocnfig.js

  plugins: [
    new webpack.DefinePlugin({}),

 

 

HtmlWebpackPlugin

따로 분리하여 번들한 css파일과 js파일을 각각 html 파일에 link 태그, script태그로 추가해줘야 한다. HtmlWebpackPlugin은 이것을 자동화 해준다. 웹팩의 기본 플러그인은 아니라서 따로 설치해야한다.

 

npm install -D html-webpack-plugin

 

webpack.ocnfig.js

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발)' : '',
      },
    }),

 

src/index.html (빌드 전)

<title>검색<%= env %></title>

 

NODE_ENV 에 development 빌드

NODE_ENV=development npm run build

 

dist/index.html (빌드 후)

<title>검색(개발)</title>

 

dist/index.html (NODE_ENV가 development가 아닐 시)

<title>검색</title>

 

NODE_ENV 값이 development 일때와 아닐때

 

 

CleanWebpackPlugin

웹팩의 기본 플러그인은 아니라서 따로 설치해야한다.

npm install -D clean-webpack-plugin

CleanWebpackPlugin은 빌드 이전 결과물을 제거하는 플러그인으로 빌드 결과물은 웹팩에서 아웃풋 경로에 설장한 곳으로 폴더 및 파일들이 모이는데 빌드 했을시 이전 빌드내용이 삭제되지 않고 그대로 남아있는 경우도 있어 이것을 해결해주는 플러그인이다.

clean-webpack-plugin을 가져올땐 default export가 되어있지 않아서 아래와 같이 중괄호로 가져와야 한다.

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

  plugins: [
    new CleanWebpackPlugin(),

 

 

MiniCssExtractPlugin

번들 결과에서 CSS를 별도의 파일로 추출하는 플러그인으로, JS파일 당 CSS파일을 작성한다. 브라우저에서 큰 파일을 하나 내려 받는 것보단 작은 파일을 여러개 다운로드하는 것이 더 빠르다.

개발 환경에서는 CSS를 하나의 모듈로 처리해도 상관 없지만 production 환경에선 분리하는 것이 효과적이다.

 

npm install mini-css-extract-plugin

 

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' })]
    : []),
],

module과 plugins에 모두 써줘야한다.

 

참고

https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

https://www.daleseo.com/webpack-plugins-define-environment/