Webpack中MiniCssExtractPlugin未压缩CSS代码的问题排查

问题根源 #

Webpack 4的mode: production默认仅压缩JS代码，CSS压缩需要额外配置——MiniCssExtractPlugin本身不提供压缩功能，你提到的text-webpack-plugin应该是笔误，该插件也不负责CSS压缩。另外，你的配置里缺少CSS压缩相关设置，和resolve-url-loader无关。

两种解决方法 #

方法1：使用optimize-css-assets-webpack-plugin #

这是Webpack 4中常用的CSS压缩插件，步骤如下：

1. 安装插件：

npm install optimize-css-assets-webpack-plugin --save-dev

2. 在webpack配置中引入并配置optimization.minimizer：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// ... 其他已有的插件引入

module.exports = {
  // ... 现有配置内容
  optimization: {
    minimizer: [
      // 保留默认的JS压缩器（避免JS失去压缩）
      require('terser-webpack-plugin'),
      // 添加CSS压缩器
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  // ... 其他配置内容
}

方法2：通过PostCSS的cssnano插件压缩 #

如果你已经在用postcss-loader，可以直接在PostCSS配置中加入cssnano完成压缩：

1. 安装cssnano：

npm install cssnano --save-dev

2. 在你的postcss.config.js中添加插件：

module.exports = {
  plugins: [
    // ... 你的其他PostCSS插件（比如autoprefixer）
    require('cssnano')({
      preset: 'default' // 使用默认压缩规则
    })
  ]
}

这种方式无需修改webpack配置，PostCSS会在处理CSS时自动完成压缩。

额外检查点 #

• 确认你的mode确实设置为production（你的配置已满足）
• devtool: 'source-map'不会影响压缩，仅生成sourcemap文件，无需调整

内容的提问来源于stack exchange，提问作者Danil Kokorin