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/