Webpack的CommonChunksPlugin配置与延迟加载的模块？

Question

I'm using Webpack with CommonChunksPlugin .

My problem is with lazy loaded modules.
When I load lazy modules ( 0.js and 1.js in image) , Where each uses the Http Module , it seems that Http is embedded/repeated in EACH module :

The entries in my file are :

 entry: {
            bundle: aot ? "./main.aot.ts" : "./main.ts",
            vendor: "./vendor",
        },

With CommonsChunkPlugin configured as :

  new webpack.optimize.CommonsChunkPlugin({ name: ["vendor"], }), 

— I get this result where you can see multiple http.js both in bundle & 1.js& 0.js.

With CommonsChunkPlugin configured with async ( as written in here ) :

  new webpack.optimize.CommonsChunkPlugin({ async: true, children: true, }), 

— I get this result where you can see tha 0.js and 1.js are OK but the bundle.js now contains dups as vendor(?!?!)

Question:

I've read the docs But as you can see , I'm trying to do something without success.

How can I fix the config so that common chunks will be extracted and not be repeated ?

webpack.config

Answer 1

Was having the same issue as you are/were facing. In my case, I've removed the name parameter from the configuration and set async to true and children to true as well. Also, make sure that the CommonChunksPlugin is the last plugin in the array of plugins.