Plugins

plugins 옵션은 다양한 방법으로 webpack 빌드 프로세스를 사용자 정의하는 데 사용됩니다. Webpack은 사용 가능한 다양한 내장 플러그인을 webpack.[plugin-name]으로 제공합니다. 플러그인 및 문서 목록은 Plugins 페이지를 참고하세요. 커뮤니티에는 더 많은 내용이 있습니다.

plugins

[Plugin]

webpack 플러그인의 배열입니다. 예를 들어 DefinePlugin을 사용하면 컴파일 때에 구성 가능한 전역 상수를 만들 수 있습니다. 이는 개발 빌드와 릴리스 빌드 간에 서로 다른 동작을 허용하는 데 유용합니다. Webpack 5.87.0 부터는 falsy 값을 사용하여 특정 플러그인을 조건부로 비활성화할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  plugins: [
    new webpack.DefinePlugin({
      // Definitions...
    }),
    false && new webpack.IgnorePlugin(), // 조건부 비활성화
  ],
};

여러 플러그인을 사용하는 더 복잡한 예는 다음과 같습니다.

webpack.config.js

var webpack = require('webpack');
// webpack에 기본적으로 제공되지 않는 플러그인을 import
var DashboardPlugin = require('webpack-dashboard/plugin');

// 설정에 플러그인 추가
module.exports = {
  //...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // 컴파일 타임 플러그인
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
    }),
    // webpack-dev-server 향상 플러그인
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
};