Question

我的网络应用程序的生态系统详细信息：

ES6
巴别
的WebPack

我们的应用程序有自己的架构工件，然后页面上的每个小部件都有自己的工件。一切都使用上面提到的生态系统的东西。

为简单起见，假设我有用于体系结构的工件Arch以及用于我的2个小部件的w1和w2工件。如果我单独捆绑所有这些工件，他们会生成一个包，其中babel-runtime包含在所有三个包中。因此，当我将它们放在网页中时，我基本上包括相同的代码（babel-runtime）3次。

问题： 他们是一种单独构建每个包但不包含babel-runtime代码的方法，这样我可以全局包含babel-runtime代码以供所有三个包文件使用吗？

Answer 1

是的，您应该使用CommonsChunckPlugin

在webpack.config.js文件中使用它的方法如下：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('shared.js');

module.exports = {
  entry: {
    bundle1: '.src/fileForBundle1.js',
    bundle2: '.src/fileForBundle2.js'
  },
  output: {
    path: 'build',
    filename: '[name].js'
  },
  plugins: [
    commonsPlugin,
  ],
  module: {
    loaders: [
      // ...
    ]
  }
}

所有共享代码都在shared.js文件中，您只需将此文件包含在具有不同包的每个页面中。

使babel运行时全局到不同的webpack包

1 个答案: