How to reuse webpack vendor bundle

问题

I assume that I can achieve what I am trying to do with webpack but still could not figure it out. Here is the use case.

I have couple of Angular Apps (will get loaded within same browser window) which will be reusing exactly the same vendor bundle. At the moment webpack produces two files, app.[app_module_name].js and vendor.js in each app. So theoretically I should be able to only include one vendor.js file in the html page and then load several app modules. However this does does not work since webpack internal references for lib's in vendor are different from each other.

Following is my configuration at the moment. Would be great if anyone can help me out.

entry: {
      bootstrap: './src/app/init/bootstrap.js',
      tradingApp: './src/app/app.js'
    },
    output: {
      filename: '[name].bundle.js',
      publicPath: '/',
      path: path.join(projectRoot, 'dist')
    },
plugins:[
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
          return module.resource && module.resource.indexOf(path.join(projectRoot, 'src')) === -1
        }
      }),
]

来源：https://stackoverflow.com/questions/36097701/how-to-reuse-webpack-vendor-bundle