commonsChunkPlugin not grouping node_modules

Question

I would like to move all common chunks of my bundles to a vendor.[chunkhash].js file. However after inspecting the output I see some node_modules are included more then once having a large impact on output size.

Webpack commonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    filename: "vendor.[chunkhash].js",
    minChunks(module, count) {
        const context = module.context;
        return context && context.indexOf("node_modules") >= 0;
    }
}),

Output

Am I doing this wrong? Be aware that the ´wizer-components´ are components which also need to be built but have been put in a separate folder because I use them throughout other projects. Running the dev server is working fine and all components are working.

have you managed to make it work? – alex.mironov Mar 19 '18 at 17:06 — alex.mironov, Mar 19 '18 at 17:06

score 0 · Answer 1 · answered Mar 19 '18 at 21:18

0

I solved this by adding the following param to the webpack config. This basically tells webpack to first look in my js folder, then the global node_modules and then the local node_modules.

Because of this webpack will always find react in the global node_modules allowing it to be bundled only once.

resolve: {
    modules: ["js", path.join(__dirname, "node_modules"), "node_modules"]
},

answered Mar 19 '18 at 21:18

NealVDV

2,302
3
26
51

not sure if I fully got it. could you please take a look at this issue https://stackoverflow.com/questions/49361519/duplications-when-using-commonschunkplugin I use modules: ["app", "api-layer", path.join(__dirname, "node_modules"), "node_modules"], but it doesn't seem to fix the issue entirely – alex.mironov Mar 20 '18 at 13:09

commonsChunkPlugin not grouping node_modules

1 Answers1