plugin有哪些

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文件

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及以上版本)
按需加载CSS

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标签的方式加载。

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',
        })
    ]
}

官网地址：https://www.webpackjs.com/concepts/