웹팩 플로그인은 번들링 과정 중에 더 많은 작업을 수행할 수 있게 하는 도구이다. 로더는 파일 변환이나 모듈 처리와 관련된 작업을 담당하는 반면, 플러그인은 번들된 결과물을 최적화하거나 수정하는 등 빌드 과정에서 추가적인 작업을 수행할 수 있다.

플러그인 사용법

기본적으로 웹팩에서 제공하는 몇 가지 기본 플러그인을 소개하고, 이를 웹팩 설정에 추가하는 방법을 보여주겠다.

1. HTMLWebpackPlugin

이 플러그인은 HTML파일을 생성하거나 기존 HTML파일에서 번들된 자언을 추가할 수 있다.

1) 플러그인 설치

npm install html-webpack-plugin --save-dev

2) 웹팩 설정에 플러그인 추가

webpack.config.js

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


module.exports = {
   	...
  	output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        })
    ]
}

HtmlWebpackPlugin을 사용하여 src/index.html 파일을 기반으로 번들된 자원을 추가한 dist/index.html 파일을 생성한다.

2. CleanWebpackPlugin

이 플러그인은 빌드 시 지언에 생성된 파일들을 정리하는 역할을 한다.

1) 플러그인 설치

npm install clean-webpack-plugin --save-dev

2) 웹팩 설정에 플러그인 추가

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

module.exports = {
    ...
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
      	...
        new CleanWebpackPlugin()
    ]
}

CleanWebpackPligin을 사용하여 빌드 시 이전에 생성된 dist 폴더를 정리합니다.

---

플러그인의 역할

플러그인은 웹팩 빌드 프로세스에서 다양한 역할을 수행할 수 있다.

1. 예시

1) 코드 최적화

UglifyJsPlugin을 사용하여 자바스크립트 코드를 압축하고 최적화할 수 있다.

2) 환경 변수 주입

DefinePlugin을 사용하여 빌드 시에 환경 변수를 주입할 수 있다.

3) 번들 사이즈 분석

BundleAnalyzerPlugin을 사용하여 번들의 사이즈를 분석하고 최적화할 수 있다.

4) CSS 최적화

MiniCssExtractPlugin을 사용하여 CSS를 최적화하고 별도의 파일로 추출할 수 있다.

---

플러그인은 웹팩의 강력한 기능 중 하나이며, 필요에 따라 다양한 플러그인을 사용하여 빌드 프로세스를 커스터마이징할 수 있다.