Name webpack chunks from react-loadable

Question

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?

Reverberatory

Answer 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

---

EDIT:

Addtional information for substitutions can be found in the webpack documentation for output.chunkFilename and for output.filename

Reverberatory