常用plugin

开启HMR

用途：页面热更新（模块热替换）
首先我们要确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
    hot:true,
  }
}

也可以在页面中开启HMR，比如下面这个例子：

// index.js
import { add } from 'util.js';
add(2,3);
if(module.hot){
  module.hot.accept();
}

大多数时候，还是建议开发者使用第三方提供的HMR解决方案（比如react-hot-loader、vue-loader），因为HMR触发过程中可能会有很多意想不到的问题。

html-webpack-plugin

用途：自动打包生成html

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin()
    ],
};

clean-webpack-plugin

在每次构建前清理 /dist 文件夹。
官方给的例子在新版本中运行不了，正确配置如下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  ...
  plugins:[
        new CleanWebpackPlugin()
  ],
}

extract-text-webpack-plugin(webpack 4之前版本)

用途：提取样式到css文件
在webpack.config.js中引入：

const ExtractTextplugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './app.js';
  output: {
    filename:'bundle.js',
  },
  mode:'development',
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextplugin.extract({
          fallback:'style-loader',
          use:'css-loader',
        })
      }
    ]
  },
  plugins:[
    new ExtractTextPlugin('bundle.css')
  ]
} 

mini-css-extract-plugin(webpack 4及以上版本)

mini-css-extract-plugin可以理解成extract-text-webpack-plugin的升级版，它拥有更丰富的特性和更好的性能，从Webpack 4开始官方推荐使用该插件进行样式提取（Webpack 4以前的版本是用不了的）。
说到mini-css-extract-plugin的特性，最重要的就是它支持按需加载CSS，以前在使用extract-text-webpack-plugin的时候我们是做不到这一点的。举个例子，a.js通过import()函数异步加载了b.js，b.js里面加载了style.css，那么style.css最终只能被同步加载（通过HTML的link标签）。但是现在mini-css-extract-plugin会单独打包出一个0.css（假设使用默认配置），这个CSS文件将由a.js通过动态插入link标签的方式加载。

在webpack.config.js中引入：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: './app.js',
    output: {
        filename:'[name].js',
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:'../',
                    },
                },
                'css-loader'
            ],
        }],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename:'[id].css',
        })
    ]
}

压缩css

压缩CSS文件的前提是使用extract-text-webpack-plugin或mini-css-extract-plugin将样式提取出来，接着使用optimize-css-assets-webpack-plugin来进行压缩，这个插件本质上使用的是压缩器cssnano，当然我们也可以通过其配置进行切换。具体请看下面的例子：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            }
        ],
    },
    plugins: [new ExtractTextPlugin('style.css')],
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({
            // 生效范围，只压缩匹配到的资源
            assetNameRegExp: /\.optimize\.css$/g,
            // 压缩处理器，默认为 cssnano
            cssProcessor: require('cssnano'),
            // 压缩处理器的配置
            cssProcessorOptions: { discardComments: { removeAll: true } },
            // 是否展示 log
            canPrint: true,
        })],
    },
};

terser (webpack 4 集成)

压缩Javascript
// 自定义terser-webpack-plugin配置

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    //...
    optimization: {
        // 覆盖默认的 minimizer
        minimizer: [
            new TerserPlugin({
                /* your config */
                test: /\.js(\?.*)?$/i,
                exclude: /\/excludes/,
            })
        ],
    },
};

webpack-bundle-analyzer

用途： 分析打包后输出的bundle体积大小。
安装:

npm i webpack-bundle-analyzer -D

webpack.config.js配置：

const Analyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  ...
  plugins: [
    new Analyzer()
    ],
}