将多个第三方JavaScript库捆绑到一个webpack的最佳方法

Question

我正在关注webpack教程，并且根据我的理解，将所有内容捆绑到一个模块中，它需要脚本使用require('./xyz')

直到现在，我曾经在单独的脚本中编写所有内容，并使用多个脚本标记加载HTML中的所有脚本。我不认为现在可以改变每个脚本。那么有没有办法将所有内容捆绑到一个模块中并使用它？

PS：类似这样：similar SO

我想问的另一件事，如标题所示，如何捆绑第三方库，如angularjs，jquery，bootstrap，ui-router等等？ （彼此之间没有共同的联系）？我尝试将一个数组作为entry给webpack，它产生了一个4MB的大型JS，但它甚至没有工作。有什么更好的方法呢？

Answer 1

您可以使用CommonsChunkPlugin创建一个包含webpack的explicit vendor chunk（如果您使用的是webpack＆lt; 4）

entry: {
  vendor: [
    'angular',
    'jquery',
    // etc.
  ],
  app: './index.js'
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',   
    minChunks: Infinity,
  })
]

您也可以使用DllPlugin和there’s an example。