Menu
I have two independent parts of application that both splitted to 'app' and 'vendor' bundles.
Webpack entries:
entry: {
'client-app': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'main.ls'),
'client-vendor': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'vendor.ls'),
'admin-app': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'main.ls'),
'admin-vendor': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'vendor.ls')
},
And plugins:
plugins: [
new ExtractTextPlugin('[name].bundle.css'),
new webpack.optimize.CommonsChunkPlugin({
names: ['client-app', 'client-vendor'],
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['admin-app', 'admin-vendor'],
minChunks: Infinity
})
]
With just 'client-app' and 'client-vendor' or 'admin-app' and 'admin-vendor' and single CommonsChunkPlugin it works perfect, it generates 2 bundles (app & vendor) but with this pairs it fails with error:
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (admin-app)
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (admin-vendor)
How I can do it right?
653
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.
Webpack injects some code into main. js which takes care of lazy loading async chunks and stops from loading same chunks again and again. When a route changes, React router calls a Webpack function to load a chunk file and Webpack after done loading runs it, which chunk then would internally ask React to do something.
The common chunk is a place for all the things that more than one of your feature modules use. Let's say you have a custom grid component in a custom grid module. You then import this grid module into your user and admin feature modules.
Each of the runtime files contains code that enables loading of your chunks. If you open any of those runtime files, you will see code that loads your chunks via Jsonp. Since you have asked webpack to split chunks, you are now free to load any chunk any time.
I had the same requirement and solved it by splitting the config into two and supplying module.exports with an array.
module.exports = [{
entry: {
'client-app': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'main.ls'),
'client-vendor': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'vendor.ls')
},
...
plugins: [
new ExtractTextPlugin('[name].bundle.css'),
new webpack.optimize.CommonsChunkPlugin({
names: ['client-app', 'client-vendor'],
minChunks: Infinity
})
]
},
{
entry: {
'admin-app': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'main.ls'),
'admin-vendor': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'vendor.ls')
},
...
plugins: [
new ExtractTextPlugin('[name].bundle.css'),
new webpack.optimize.CommonsChunkPlugin({
names: ['admin-app', 'admin-vendor'],
minChunks: Infinity
})
]
}]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
