플러그인

<aside> 💡

번들링 과정에서 추가 작업 수행

</aside>

// webpack.config.js
const { HotModuleReplacementPlugin, DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new HotModuleReplacementPlugin(),
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      VERSION: JSON.stringify('1.0.0'),
    }),
  ],
};

Webpack 주요 플러그인

• HtmlWebpackPlugin

번들링 JavaScript 및 CSS 파일이 포함된 index.html을 자동 생성

• HotModuleReplacementPlugin

실행 중일 때 변경된 모듈만 갱신하는 **HMR 제공**

• DefinePlugin

빌드 시점에 전역 상수를 정의 가능.

process.env.NODE_ENV와 같은 환경 변수, 빌드 정보(버전 등)