[Webpack] webpack plugins 정리

2021.06.25 - [Frontend/Webpack] - [Webpack] devServer option 정리

[Webpack] devServer option 정리

공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :)

---

PortFinder

• 실행 가능한 포트를 찾아주는 플러그인
• 실행 가능한 포트를 찾아서 devServer 에 연결도 가능하다.

const portfinder = require('portfinder');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

// 실행 가능한 포트를 찾아서 devServer 에 연결
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port;
  console.log("base port : "+portfinder.basePort);

  portfinder.getPort((err, port) => {
    if (err) {
      console.log("portFinder eror!");
      reject(err);
    } else {
      console.log("portFinder success! port:"+port);
      process.env.PORT = port;
      devWebpackConfig.devServer.port = port;

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }));

      resolve(devWebpackConfig);
    }
  })
});​

 

HtmlWebpackPlugin

• 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인 (HTML 생성의 단순화) 
  •  filename
  • template
  • inject
  • minify
    • removeComments : 주석 제거
    • collapseWhitespace : 빈칸 제거
    • removeAttributeQuotes : 따옴표의 중복인 경우 따옴표 생략 (HTML 은 항상 따옴표를 사용하도록 권장

 

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: config.build.index,
    inject: true,
    minify: process.env.NODE_ENV === 'production' ? {
      removeComments: true,       // 주석 제거
      collapseWhitespace: true,   // 빈칸 제거
      removeAttributeQuotes: true // 따옴표의 중복인 경우 따옴표 생략 (HTML 은 항상 따옴표를 사용하도록 권장하긴 함..)
    } : false
  })
]

 

DefinePlugin

• 환경별로 자원을 별도로 관리하도록 지원해주는 플러그인

const webpack = require('webpack');

plugins: [
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env')
  }),
]

 

CleanWebpackPlugin

• 빌드 이전의 결과물을 제거하는 플러그인
• webpack4+ 버전 부터 지원합니다. 주의 !!

// 작업 전 npm install 필수!
$npm install -D clean-webpack-plugin

plugins: [
  new CleanWebpackPlugin()
]

 

UglifyJsPlugin

• 코드를 압축하여 난독화 시켜주는 플러그인
  • uglifyOptions
    • compress
      • warnings : 압축 시 발생하는 경고는 무시
  • sourceMap
  • parallel : 병렬화 지원

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
  }),
]

 

OptimizeCSSPlugin

• CSS 를 압축하여 최적화 시키는 플러그인
• webpack5 부터는 `css-minimizer-webpack-plugin` 을 사용해야 합니다. 
  • cssProcessorOptions
    • safe
    • map
      • inline

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
  new OptimizeCSSPlugin({
    cssProcessorOptions: {
      safe: true,
      map: {
      	  inline: false
      }
    }
  }),
]

 

ExtractTextPlugin

• 웹팩을 통해서 css 를 로드하면 js 와 함께 로드 되는데, 이를 번들링 하는 과정에서 분리하여 css 와 js 가 병렬로 로드될 수 있도록 하는 플러그인
  
  • filename
  • allChunks

const ExtractTextPlugin = require('extract-text-webpack-plugin');

plugins: [
  new ExtractTextPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    allChunks: true,
  })
]

 

HotModuleReplacementPlugin

• HMR 을 활성화 시키는 방법
• devServer.hot 옵션까지 써줘야 브라우저가 자동으로 reload 해준다. (옵션을 지정하지 않으면 웹팩만 자동으로 재실행됨)

const webpack = require('webpack');

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

 

NamedModulesPlugin

• 번들링된 웹팩 파일 로그에 상세 경로를 함께 출력해주는 플러그인

const webpack = require('webpack');

plugins: [
  new webpack.NamedModulesPlugin()
]

 

NoEmitOnErrorsPlugin

• 컴파일 도중 오류가 발생했을 때 오류가 발생한 리소스는 제외하고 번들링 해주는 플러그인

const webpack = require('webpack');

plugins: [
  new webpack.NoEmitOnErrorsPlugin()
]

 

ModuleConcatenationPlugin

• 번들링 시 모든 모듈의 범위를 하나의 폐쇄에 연결하여 브라우저가 빨리 로드될 수 있도록 하는 플러그인

const webpack = require('webpack');

plugins: [
  new webpack.HashedModuleIdsPlugin(),
]