웹팩의 4가지 주요 속성 - Plugin

📌 Plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.

로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다.

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

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

// webpack.config.js
var webpack = require('webpack'); //webpack이 기본으로 제공해주는 plugin 사용하기위해 import
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(), //웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
    new webpack.ProgressPlugin() //웹팩의 빌드 진행율을 표시해주는 플러그인
  ]
}

웹팩이 기본으로 제공해주는 플러그인은 웹팩 구성 파일(webpack.config.js)에서 바로 임포트한 후 플러그인 객체의 인스턴스를 "plugins" 배열에 추가하면 되고 그 이외 플러그인들은 마찬가지로 npm을 이용해 설치 해주고 같은 과정으로 추가하면 된다.

📌 자주 사용하는 플러그인

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