webpack 4 react loadable is not spliting vendor base on chucking point

问题

I am currently using webpack 4 with react loadable to create chunks. It actually chunks depends on the break point. However, vendor size remains same. React loadable is not supporting webpack 4 yet ? or I am missing some setup ?

css actually seems to splited into the chunk, though

{
  output: {
    path: 'tothe path',
    publicPath: `/publicPath/`,
    filename: '[name] + '.js',
    chunkFilename: '[name]',
  },
  resolve: {
    extensions: ['.js', '.json', '.css'],
    alias: aliases
  },

  stats: {
    warnings: false,
    children: false,
  },

  optimization: {

    splitChunks: {
      chunks: "all",
      name: true,
      cacheGroups: {
        common: {
          name: "vendor" + ".js",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          enforce: true,
          reuseExistingChunk: false,
        },
      }
    }
  }
}

回答1:

React-loadable doesn't work well with Webpack 4 yet, take a look at this pull request.

There's a fork of react-loadable (by the author of PR), but it didn't work for me either. I had a problem that some components wrapped in Loadable won't load.

回答2:

@Bohdan Other
I also ran into this problem.

I found that the components can't load all import style. If I remove the style, the component will load normally.

I move all the styles to the entry file as a workaround.

来源：https://stackoverflow.com/questions/49288130/webpack-4-react-loadable-is-not-spliting-vendor-base-on-chucking-point