Name webpack chunks from react-loadable

问题

I've successfully added react-loadable library in my project to enable code splitting, the only problem I've found is that the chunks generated by webpack are not named, they are given integer names.

My code for react-loadable use is

const AppRootLoadable = Loadable({
  loader: () => import(/* webpackChunkName: "app" */ './App'),
  loading: () => null,
  render(loaded) {
    const Component = loaded.default;
    return <Component />;
  },
});

I've added the comment to tell webpack 3 that I want this chunk to be named app. Have I done something wrong?

回答1:

Ok, after 4 days I found the solution. I needed to add the chunkFilename line to my webpack config:

output: {
  path: path.join(__dirname, './../public'),
  filename: 'bundle.js',
  publicPath: '/',
  chunkFilename: '[name].[chunkhash].js'
},

Then it works. I found it in the webpack github page

来源：https://stackoverflow.com/questions/46584486/name-webpack-chunks-from-react-loadable