webpack中，有哪些常见的Plugin？他们分别是解决什么问题的？

plugin可以在webpack运行到某个时刻的时候，帮你做一些事情

HtmlWebpackPlugin
HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), ], };


#### clean-webpack-plugin
* clean-webpack-plugin插件用来清除残留打包文件，特别是文件末尾添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多。
* 新版本中的clean-webpack-plugin仅接受一个对象，默认不需要传任何参数。具体可参考`https://blog.csdn.net/qq_23521659/article/details/88353708`
```js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
...
plugins: [
    new CleanWebpackPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }

SplitChunksPlugin

具体概念可参考https://juejin.im/post/5af15e895188256715479a9a

splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
    vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
    },
default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
    }
}
}

MiniCssExtractPlugin

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: '[name].css',
  chunkFilename: '[id].css',
}),
],
module: {
rules: [
  {
    test: /\.scss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader
      },
      {
        loader: "css-loader",
        options: {
          importLoaders: 2 // 用于指定在 css-loader 前应用的 loader 的数量
          // modules: true   // 查询参数 modules 会启用 CSS 模块规范
        }
      },
      "sass-loader",
      "postcss-loader"
    ]
  },
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader
      },
      "css-loader",
      "postcss-loader"
    ]
  }
],
},
};

OptimizeCSSAssetsPlugin

webpack5可能会内置CSS 压缩器，webpack4需要自己使用压缩器，可以使用 optimize-css-assets-webpack-plugin 插件。设置 optimization.minimizer 覆盖webpack默认提供的，确保也指定一个JS压缩器
```
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
```

module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourcMap: true }), new OptimizeCSSAssetsPlugin({}), ], }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), ], module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] } ] } }

Cosen95 / fe_interview