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

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

问题描述

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

• 问题代码如下：

  // 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变成了如下图所示

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中提取
    }),
]