plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.
로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 된다.

플러그인은 아래와 같이 선언한다.

// webpack.config.js
module.exports = {
    plugins: []
}

플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다.
예를 들어보겠다.

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin(),
        new webpack.ProgressPlugin()
    ]
}

위의 두 플러그인은 각각 아래와 같은 역할을 한다.

• HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 html 파일을 생성해주는 플러그인
• ProgressPlugin : 웹팩의 빌드 진행률을 표시해주는 플러그인

자주 사용하는 플러그인

• split-chunks-plugin
• clean-webpack-plugin
• image-webpack-loader
• webpack-bundle-analyzer-plugin

참고로 말씀드리면 웹팩의 내부도 여러가지 플러그인으로 구성이 되어있기 때문에 플러그인이 얼마나 유용하게 전반적으로 쓰이고 있는지 아실 수 있을 겁니다.