Webpack4多页应用拆分React框架后CSS提取异常问题求助

我懂你碰到的这个坑——原本好好的能按entry拆分出index.css、home.css这些独立样式文件，结果加了splitChunks提取react/react-dom后，所有样式全被合并到react.css里了。核心原因是你之前的splitChunks配置太宽泛，把业务组件的公共依赖（包括样式关联的chunk）也打包进了react chunk，而extract-text-webpack-plugin是跟着chunk维度提取样式的，自然就把所有样式揉成一团了。

下面给你两个实用的解决方案：

方案1：精准配置splitChunks，只提取react/react-dom #

修改splitChunks的缓存组配置，把匹配范围严格限定在react和react-dom模块，避免误合并业务组件的chunk：

optimization: {
  splitChunks: {
    cacheGroups: {
      reactVendor: {
        // 精准匹配node_modules下的react、react-dom模块
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'react',
        chunks: 'all',
        enforce: true // 强制创建该chunk，优先级高于其他缓存组
      }
    }
  }
}

这样配置后，只有react和react-dom会被打包到react chunk中，你的业务组件chunk依然保持独立，extract-text-webpack-plugin就能正常按每个业务chunk提取对应的CSS文件了。

方案2：替换为mini-css-extract-plugin（更推荐） #

extract-text-webpack-plugin其实已经不再适配Webpack4+的新特性，官方更推荐使用mini-css-extract-plugin，它对splitChunks的支持更稳定，还能获得更好的构建性能。

步骤1：安装插件 #

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

步骤2：修改配置 #

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... 其他原有配置
  module: {
    rules: [
      {
        test: /\.css$/,
        // 用MiniCssExtractPlugin的loader替换原extract-text的配置
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
        // 如果使用scss，可扩展为：
        // use: [
        //   MiniCssExtractPlugin.loader,
        //   'css-loader',
        //   'sass-loader'
        // ]
      }
    ]
  },
  plugins: [
    ...htmls,
    new MiniCssExtractPlugin({
      filename: 'style/[name].[contenthash].css'
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        reactVendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

这个方案不仅能彻底解决样式合并的问题，还能兼容Webpack4的各种新特性，是更长期的解决方案。

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