プラグイン

pluginsオプションは、webpackのビルドプロセスを様々な方法でカスタマイズするために使用されます。Webpackには、webpack.[plugin-name]で利用できる様々な組み込みプラグインが付属しています。プラグインの一覧とドキュメントについては、プラグインページを参照してください。ただし、コミュニティにはさらに多くのプラグインが存在することに注意してください。

plugins

[プラグイン]

webpackプラグインの配列。例えば、DefinePluginを使用すると、コンパイル時に構成できるグローバル定数を作成できます。これは、開発ビルドとリリースビルドで異なる動作を可能にする場合に役立ちます。webpack 5.87.0以降では、特定のプラグインを条件付きで無効にするために、falsy値を使用できます。

webpack.config.js

module.exports = {
  //...
  plugins: [
    new webpack.DefinePlugin({
      // Definitions...
    }),
    false && new webpack.IgnorePlugin(), // disabled conditionally
  ],
};

複数のプラグインを使用する、より複雑な例は次のようになります。

webpack.config.js

var webpack = require('webpack');
// importing plugins that do not come by default in webpack
var DashboardPlugin = require('webpack-dashboard/plugin');

// adding plugins to your configuration
module.exports = {
  //...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // compile time plugins
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
    }),
    // webpack-dev-server enhancement plugins
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
};