Add external dependency on its own bundle file and load it async

[Ricardo Brandão]

Hi @philipwalton,

This setup is great, thanks for sharing it.

I would like to use this in my build, but I'm having trouble with external dependencies.

I've included momentjs, and I'm importing it inside import-1.js which will be part of an async chunk:

import {dep1} from './dep-1';
import moment from 'moment';
export const import1 = `imported: ${dep1} at ${moment.now()}`;

Furthermore, I'm adding momentjs as a new entry and extracting it as a vendor dependency to its own file, using the CommonChunksPlugin configuration in bundles.js:

new webpack.optimize.CommonsChunkPlugin({
  name: 'moment',
}),
// Extract runtime code so updates don't affect app-code caching:
// https://webpack.js.org/guides/caching/
new webpack.optimize.CommonsChunkPlugin({
  name: opts.runtimeName || 'runtime',
}),

When I run the website momentjs is not being loaded and webpack throws the following error:

I've created a Pull Request with this example so please feel free to check it out.

[Philip Walton]

Do you think this is an issue with Webpack or an issue with my boilerplate?

[Ricardo Brandão]

I believe it has to do how Webpack works. I've opened an issue with them.

Haven't you encountered this behaviour yet? If so, how did you handle it?

[Philip Walton]

I believe the problem is you're adding moment to your webpack entry option, which I don't think is needed. When I remove that from your example, it works fine for me.