使用 webpack 将多个第三方 javascript 库捆绑为一个的最佳方法答案

【问题标题】：Best way to bundle multiple third-party javascript libraries into one with webpack使用 webpack 将多个第三方 javascript 库捆绑为一个的最佳方法
【发布时间】：2018-08-17 21:06:37
【问题描述】：

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

直到现在，我过去常常在单独的脚本中编写所有内容，并将所有脚本加载到带有多个脚本标签的 HTML 中。我认为现在不可能更改每个脚本。那么有没有办法将所有东西捆绑到一个模块中并使用它呢？

PS：类似这样的东西：similar SO

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

【问题讨论】：

只需在您设置为入口点的文件中导入外部库，webpack 将捆绑它们
那么写require('angular')就足够了吗？
是的，您应该阅读以下内容：webpack.js.org/guides/getting-started
但是我已经说过我现在不能更改 JS 文件了。
"但我已经说过我现在不能更改 JS 文件。"这是什么意思？你不能修改你的 index.js 是你的入口点吗？

标签： javascript jquery angularjs webpack bundle

【解决方案1】：

您可以使用 CommonsChunkPlugin 使用 webpack 创建一个 explicit vendor chunk（如果您使用的是 webpack

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

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

【讨论】：