K
K
Konstantin2016-01-22 15:02:14
JavaScript
Konstantin, 2016-01-22 15:02:14

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'),
        ]
    }
}

With this config I get the error "Error: a dependency to an entry point is not allowed". I tried using [ ] as written here https://github.com/webpack/webpack/issues/300 but I still get routes.js with all routes (Index, Search, Buying) and separate Index, Search, Buying files which almost the same as routes.js.
I tried to read the documentation but I still can't figure out exactly how I need to write the config in order to achieve the goal.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman_Kh, 2016-01-22
@evil_random

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 question

Ask a Question

731 491 924 answers to any question