//extract-text-webpack-plugin 编译打包 config.module.rules.push({   test: /\.(scss|css)$/,   use: ExtractTextPlugin.extract({     use: [       "css-loader",       { //首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8         loader: 'postcss-loader',         options: {           plugins: [             require('autoprefixer')({ //添加前缀               browsers: CSS_BROWSERS,             }),           ],           minimize: true         },       },       "sass-loader"     ]   }) }) config.plugins.push(new ExtractTextPlugin({   filename: 'css/[name].css',   disable: false,   allChunks: true, }));   //mini-css-extract-plugin  编译打包 config.module.rules.push({   test: /\.(scss|css)$/,//同时处理css/scss     use: [       {         loader: MiniCssExtractPlugin.loader,       },       "css-loader", //css处理器       {         loader: 'postcss-loader',         /*             postcss 这个插件的作用在于，与已有的工具集成一起使用，很少有单独使用的情况，             通用我们用的最多的，是配合 autoprefixer 来添加各浏览器的前缀，以达到更好的兼容，             再深入一些就是 cssnext 就是允许开发者自定义属性和变量 ：     color:var(--theme-color,#42b983);         */         options: {           plugins: [             require('autoprefixer')({                browsers: CSS_BROWSERS,             }),           ],         },       },       "sass-loader" //sass处理器 、甚至还可以再加一个less的处理器     ] })  config.plugins.push(new MiniCssExtractPlugin({   filename: 'css/[name].css', //这里配置跟output写法一致   chunkFilename: 'css/[id][chunkhash:8].css', })); config.plugins.push(new OptimizeCssAssetsPlugin({})); //压缩文件 

optimize-css-assets-webpack-plugin

• 上面的示例里已经用到了，它的作用在于压缩css文件，
• assetNameRegExp：默认是全部的css都会压缩，该字段可以进行指定某些要处理的文件，
• cssProcessor：指定一个优化css的处理器，默认cssnano，
• cssProcessorPluginOptions：cssProcessor后面可以跟一个process方法，会返回一个promise对象，而cssProcessorPluginOptions就是一个options参数选项！
• canPrint：布尔，是否要将编译的消息显示在控制台，没发现有什么用！
• 坑点 ：建议使用高版本的包，之前低版本有遇到样式丢失把各浏览器前缀干掉的问题，

new OptimizeCssAssetsPlugin({   assetNameRegExp: /\.optimize\.css$/g,   cssProcessor: require('cssnano'),   cssProcessorPluginOptions: {     preset: ['default', { discardComments: { removeAll: true } }],     //autoprefixer: { browsers: CSS_BROWSERS }, 也是可以指定前缀的   },   canPrint: true })

SplitChunksPlugin、RuntimeChunkPlugin

• 它们跟上一篇的optimization配置下的的
  关键字：