Answer the question
In order to leave comments, you need to log in
How to split code into page bundles using Webpack with CommonsChunkPlugin?
The project is not a single page application. Navigation between pages is implemented through window.location.href due to the large number of pages and heavy javascript.
I'm trying to configure webpack with CommonsChunkPlugin but can't seem to get it to split its page code into separate files.
I have the following files:
client.js - general js
routes.js - determines where we are and includes the necessary file from /routes/
routes/Index.js - route of the main page
routes/Search.js - route of the search page
routes/Buying. js - purchase page route
Purpose to separate files from /routes/ into bundles. Now webpack is shoving everything into routes.js.
The last config is:
getConfig: function(routes) {
return {
cache: false,
output: {
filename: '[name].js'
},
entry: {
client: './source/js/client.js',
routes: './source/js/routes.js',
Index: './source/js/routes/Index.js',
Search: './source/js/routes/Search.js',
Buying: './source/js/routes/Buying.js',
vendor: ['...']
},
module: {
loaders: [...]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
]
}
}
Answer the question
In order to leave comments, you need to log in
Because vendor doesn't have to be in entry if you want it to be a single assembly of shared code.
In general, the best Webpack tutorial - https://www.youtube.com/playlist?list=PLDyvV36pndZ... - with various examples and detailed explanations.
Watch the video from 3.1 to 3.6 - it will take 20 minutes, but everything will become clear.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question