Webpack从v3迁移至v4后样式文件为空，ExtractTextPlugin无法正常工作怎么办？

我之前从Webpack 3迁移到4时也碰到过几乎一模一样的问题，折腾了好一阵才搞定，结合你提到的改动点，给你几个排查和修复的方向：

• 调整ExtractTextPlugin 4.x的配置参数
  Webpack 4对ExtractTextPlugin的参数逻辑有不少改动，尤其是你用的beta版本。一定要显式添加allChunks: true参数（这个在v3中可能默认生效，但v4 beta里需要手动声明），确保插件能收集到所有chunk里的样式内容，示例配置如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader'],
            allChunks: true // 关键参数：确保捕获所有chunk的样式
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: 'style.css',
        disable: false,
        allChunks: true // 插件实例也要同步配置该参数
      })
    ]
  };
  

• 适配Webpack 4的optimization.splitChunks配置
  你移除了CommonsChunkPlugin，Webpack 4改用optimization.splitChunks来处理公共代码/样式的拆分。如果项目有多入口或组件样式，需要配置cacheGroups专门处理样式chunk，避免ExtractTextPlugin漏掉内容：

  module.exports = {
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  };
  

• 升级ExtractTextPlugin到稳定版
  你用的4.0.0-beta.0确实存在不少已知bug，其中就包括生成空样式文件的情况。建议直接升级到正式稳定版（比如4.0.0），这类问题在正式版里已经被修复，执行命令：

  npm install extract-text-webpack-plugin@4.0.0 --save-dev
  

• 确认样式文件的导入链路
  迁移后偶尔会出现样式导入失效的情况，检查：

  • 全局样式是否在main.ts中正确import
  • Angular组件@Component装饰器里的styleUrls路径是否正确，有没有因为目录结构或配置变化导致找不到样式文件

另外你提到的“公开的…”应该是指ExtractTextPlugin仓库里的相关issue，这类问题在Webpack 4刚推出时确实是社区高频反馈点，上面的方案基本能覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者Ilya Loskutov