react和webpack4.x 使用 loadable 做 code-split 时 抽离css 遇到的问题

大桔子
最近在开发中遇到了一个问题,我在react 项目中用 react-loadableimport() 做根据路由 code-split 时的遇到的一个问题,用 extract-text-webpack-plugin 做css 抽离时,导致css有点问题

问题描述

  • 问题如下图所示:打包出来的 css 代码出现了 webpack 加载的代码:webpackContext.id = 219; 顶在了 .title 这个类前面导致 title 这个类浏览器解析不出来(猜测可能 .class 不能出现在分号后面,否则会导致浏览器解析不出来
    image.png
  • 问题代码如下:

    // webpack 配置如下:
    // "less-loader": "^4.1.0",
    // "extract-text-webpack-plugin": "^4.0.0-beta.0",
    
    module: {
        rules: [
           {
                test: /\.(css|less)$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",
                        { 
                            loader: "less-loader", 
                            options: { 
                                outputStyle: 'expanded',
                                compress: false
                            } 
                        }
                    ]
                }),
                include: path.resolve(__dirname, "..", "src"),
            }
        ]
    },
    plugin: [
        new ExtractTextPlugin({
            filename: "assets/[name].[chunkhash:8].css", // 生成的文件名
            allChunks: true // 从所有chunk中提取
        }),
    ]
            
    // react 代码
    const Article = Loadable({
        loader: () => import(...)
        loading: () => <div></div>
    });
    
    export default class Root extends Component {
        render() {
            return (
                <Router history={history}>
                    <Switch>
                        <Route path="..." component={Article} exact />
                    </Switch>
                </Router>
            );
        }
    }

解决办法

  • 查阅文档得知 webpack4.x 之后就不推荐用 extract-text-webpack-plugin 做样式抽离了,而是推荐用 mini-css-extract-plugin,将上述代码中的 ExtractTextPlugin 替换为 MiniCssExtractPlugin
  • 通过以下配置打包出来的css变成了如下图所示

D990D316-8639-43D3-8163-1C12C5E004E0.png

module: {
    rules: [
             {
                test: /\.(css|less)$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader }, // 不再需要 style-loader 了
                    "css-loader",
                    "postcss-loader",
                    {
                        loader: "less-loader",
                        options: {
                            outputStyle: 'expanded', 
                            compress: false
                        }
                        // 此处必须加这个配置,否则 px2rem 插件的 /*no*/ 不起作用
                        // 详情参考:https://github.com/neilgao000/blog/issues/15
                    }

                ]
            }
    ]
},
plugin: [
   new MiniCssExtractPlugin({
        filename: "assets/[name].[chunkhash:8].css", // 生成的文件名
        allChunks: true // 从所有chunk中提取
    }),
]
阅读 1.3k

大桔子
在2017年成为一名合格的前端攻城狮狮狮

下一步该干什么呢...

547 声望
43 粉丝
0 条评论

下一步该干什么呢...

547 声望
43 粉丝
文章目录
宣传栏