抽离/压缩css

  • 使用mini-css-extract-plugin进行css抽离;
  • 使用css-minimizer-webpack-plugin进行css压缩
// 下面的配置只保留与抽离/压缩css相关配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
  module: {
    rules: [
      // 抽离css less到单独文件
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  },
  optimization: {
    minimizer: [
      // 压缩css
      new CssMinimizerPlugin()
    ],
  },
  plugins: [
    // 重命名css文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    })
  ]
}

results matching ""

    No results matching ""