ExtractTextPlugin插件失效求助：无报错但未生成合并CSS文件

嘿，我来帮你排查下这个问题，从你的配置里能看到几个关键的小问题，咱们一个个来解决：

1. 修正Loader的写法错误 #

你的SCSS规则里，use: 'css-loader|sass-loader'这种用竖线分隔的写法是旧版Webpack的语法，现在Webpack要求多Loader用数组形式声明，不然无法正确解析多个Loader的执行顺序：

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'] // 改成数组格式，去掉竖线分隔
  }),
}

2. 调整ExtractTextPlugin的输出路径 #

你当前配置的new ExtractTextPlugin('src/styles.css')，路径是相对于Webpack的output.path（默认是项目根目录下的dist文件夹），所以最终会生成dist/src/styles.css，这可能和你预期的输出位置不符。如果想直接把CSS输出到dist根目录，改成：

new ExtractTextPlugin('styles.css')

如果想归类到子文件夹，比如dist/css/styles.css，可以写成new ExtractTextPlugin('css/styles.css')。

3. 版本兼容性问题（最关键的一点！） #

如果你使用的是Webpack 4及以上版本，ExtractTextPlugin已经被官方弃用了——它在Webpack 4下处理代码分割时会出现各种兼容性问题，而且官方已经停止维护，转而推荐使用mini-css-extract-plugin。这很可能是插件不工作的核心原因，建议直接替换：

步骤1：安装新插件 #

npm install mini-css-extract-plugin --save-dev

步骤2：修改Webpack配置 #

// 替换原有的ExtractTextPlugin引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 修改module.rules里的CSS/SCSS规则
module: {
  rules: [
    // ...其他规则
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },
  ],
},

// 修改plugins配置
plugins: [
  // 移除UglifyJsPlugin（原因见下一条）
  new MiniCssExtractPlugin({
    filename: 'styles.css' // 自定义输出的CSS文件名
  }),
],

4. 移除不必要的UglifyJsPlugin #

在Webpack 4的mode: 'production'模式下，Webpack已经内置了代码压缩工具（terser-webpack-plugin），你手动引入的UglifyJsPlugin不仅多余，还可能和内置工具冲突（而且它不支持ES6+语法），直接删掉即可。

修改完这些配置后，重新运行Webpack，应该就能正常生成合并后的CSS文件了！

内容的提问来源于stack exchange，提问作者Shubham Bhardwaj