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

  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
                      }
  
                  ]
              }
      ]
  }