在发布此问题之前，我就此主题咨询了以下主题：
How to include external CDN link into webpack project
Webpack and external libraries
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file How to include jQuery CDN in Webpack?
Webpack externals documentation
基于以上所有，似乎为了通过CDN加载第三方库，标准方法是使用webpack externals，它在index.html文件中生成以下脚本标记（每个Webpack）文档）。
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
虽然如果你有一个或两个库，这个解决方案是有效的，你应该如何使用Webpack中的外部来异步地（通过CDN）加载10个库（以最大化页面加载性能）？ < / p>
我目前解决此问题的方法是在index.html文件中手动包含以下脚本标记以及相关的＆＃34; async＆＃34;和＆＃34;推迟＆＃34;标签;但是，每次我添加一个新库时，我都需要更新dist文件夹中的index.html文件，这让我相信我做错了。下面是我的index.html文件当前的样子，它也在dist文件夹中复制。
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" async defer></script>
<script src="https://widget.cloudinary.com/global/all.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" async defer></script>
<script src="/dist/build.js" async defer></script>
</html>
虽然我确定有一个＆＃34; hack-ey＆＃34;实现我的目标的方式（我可以看到），我的问题是我是否可以通过官方支持的方法（如通过外部）完成上述目标。如果没有，大多数Web开发世界如何使用库，因为已知CDN几乎总能提高页面加载性能？
编辑：对于某些情况，我使用Webpack是因为我使用vue-loader来构建我的VueJS SPA（作为学习项目）。
编辑2：使用有关Webpack的错误假设以及Web开发的工作原理，询问了这个问题。结论是，如果你使用Webpack，你不应该像我一样自由地使用CDN。请参阅评论部分以获得澄清。