React项目用React.lazy拆分JS后如何将style[hash].css拆分为动态加载chunk

问题原因 #

你当前使用的extract-text-webpack-plugin是Webpack 3及更早版本的样式提取插件，不支持按动态导入的chunk拆分样式，哪怕设置allChunks: true也只会把所有样式合并为单个CSS文件，无法和你的JS动态chunk对应拆分。

解决方案步骤 #

1. 替换依赖 #

先卸载旧的样式提取插件，安装Webpack官方推荐的、支持动态chunk拆分的mini-css-extract-plugin：

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

2. 修改Webpack配置 #

把原有ExtractTextPlugin相关的配置全部替换为MiniCssExtractPlugin的配置，修改完成的完整配置如下：

const HtmlWebPackPlugin = require("html-webpack-plugin");
// 引入新的样式提取插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "index.html"
});

// 替换原有extractTextPlugin配置
const miniCssExtractPlugin = new MiniCssExtractPlugin({
    // 用[name]、[chunkhash]匹配对应JS chunk的名称，生成独立CSS文件
    filename: "css/[name].[chunkhash:8].css",
    chunkFilename: "css/[id].[chunkhash:8].css"
});

module.exports = {
    output: {
        // 把全局hash改为chunkhash，每个chunk生成独立哈希，适配按需加载的缓存策略
        filename: "js/[name].[chunkhash:8].js",
        chunkFilename: "js/[id].[chunkhash:8].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif|ico|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 25000,
                    outputPath: "/assets/",
                    name: "[name].[hash:8].[ext]"
                }
            },
            {
                test: /\.(scss|sass|css)$/i,
                use: [
                    // 替换原有ExtractTextPlugin.extract配置
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader" },
                    { loader: "postcss-loader", options: { sourceMap: true } },
                    { loader: "sass-loader", options: { sourceMap: true } }
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".json"]
    },
    // 替换插件引用
    plugins: [htmlPlugin, miniCssExtractPlugin],
    devServer: {
        historyApiFallback: {
            rewrites: [{ from: /^\/$/, to: "/index.html" }]
        }
    }
};

3. 验证效果 #

重新打包后，每个动态导入的视图JS chunk都会对应生成一个独立的CSS chunk，当你通过路由进入对应视图时，对应的JS和CSS文件会被同时加载，完全符合按需加载的需求。

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