Webpack 4中extract-text-webpack-plugin无法生成压缩CSS文件求助

嘿，我之前在Webpack 4项目里也踩过这个坑！核心原因是ExtractTextPlugin对Webpack 4的兼容性很差——它是为Webpack 3及更早版本设计的，官方在Webpack 4之后已经不再推荐使用它了，这就是你构建没报错但始终生成不了预期CSS文件的根源。

给你一套完美的替代方案，用Webpack官方推荐的插件来实现你的需求：

1. 替换依赖包 #

首先卸载掉不好用的ExtractTextPlugin，安装专门适配Webpack 4+的CSS提取和压缩插件：

npm uninstall extract-text-webpack-plugin
npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev

• mini-css-extract-plugin：负责把CSS从JS bundle中提取成单独文件
• optimize-css-assets-webpack-plugin：专门用来压缩CSS文件（UglifyJsPlugin只处理JS，不管CSS）

2. 修改webpack.config.js配置 #

把你的配置文件改成下面这样，替换插件引用和CSS loader规则：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 替换原ExtractTextPlugin为新插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // 别忘了设置生产模式，开启默认优化
  mode: 'production',
  module: {
    rules: [
      // ...你的其他loader规则（比如JS/图片等）
      {
        test: /\.css$/,
        use: [
          // 用MiniCssExtractPlugin的loader替换原ExtractTextPlugin.extract方法
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    // 配置提取后的CSS文件名和路径
    new MiniCssExtractPlugin({
      filename: 'styles.css' // 最终会输出到dist/styles.css
    })
  ],
  optimization: {
    minimizer: [
      // 保留原JS压缩插件
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false // 如果不需要sourcemap可以关闭
      }),
      // 新增CSS压缩插件
      new OptimizeCSSAssetsPlugin({})
    ]
  }
};

关键说明 #

• Webpack 4的optimization配置项是专门用来处理代码优化的，我们在这里同时配置JS和CSS的压缩插件
• 必须设置mode: 'production'，否则Webpack不会启用优化流程，压缩插件也不会工作
• 如果你之前用了ExtractTextPlugin的extract方法包裹loader，现在直接替换成MiniCssExtractPlugin.loader就可以，不需要额外的包裹逻辑

现在重新执行构建命令，你就能在dist文件夹里看到压缩好的styles.css文件啦！

内容的提问来源于stack exchange，提问作者Kas Elvirov