抽离与压缩css

mini-css-extract-plugin

引入：let MiniCssExtractPlugin = require('mini-css-extract-plugin') 注意：loader的执行顺序是从后往前

使用步骤

1、使用MiniCssExtractPlugin.loader 替换 ‘style-loader’【处理css的第一个loader】

modules: {
  relus: [
     {
        test: 'css',
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']   // 第一个不再使用‘style-loader’
    }
 ]
}

2、使用MiniCssExtractPlugin去抽离css【并且设置好filename的文件名哈希】

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.[contenthash:8].css'
  })

]

3、在optimization中的minimizer中配置插件OptimizeCssAssetsPlugin来压缩css

  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessorOptions: {
          safe: true,
          autoprefixer: { disable: true }, // 这里是个大坑，稍后会提到
          mergeLonghand: false,
          discardComments: {
            removeAll: true // 移除注释
          }
        },
        canPrint: true
      }),
// 当mode为production时会默认压缩混淆js代码，但是可以使用terser-webpack-plugin更优化
//     new TerserJSPlugin({
//        cache: true, // 是否缓存
//        paraller: true, // 是否并行打包
//        sourceMap: true
//    })
   ],
  }