如何使用webpack在js文件而不是html文件中加载CDN或外部供应商javascript库

我正在使用react starter工具包进行客户端编程。它使用react和webpack。没有index.html或任何要编辑的html，所有js文件。我的问题是，如果我想从云端加载一个供应商js库，我该怎么做

在html文件中很容易做到这一点<代码>

然而，在js文件中，它只使用npm安装的软件包。如何在没有html文件的情况下导入上述库？我尝试导入并要求，它们仅适用于本地文件

2015年10月21日更新 到目前为止，我尝试了两个方向，都不理想

@minheq是的，有一个类似于react start kit的html文件。它是src/components/html下的html.js。我可以将云库及其所有依赖项放在那里，如下所示：

好消息是它可以工作，我不需要在js文件中执行任何其他操作，不需要导入或请求。但是，现在我有两个以不同方式加载的jquery库。一个在这里，另一个通过npm和网页。我不知道它以后会给我带来麻烦。如果我在浏览器窗口中由于服务器端加载而键入非主路径，我使用的react路由会给我“undefined variable”错误。所以这个解决方案不是很好

使用网页包外部功能。这记录为：。“当您要将现有API导入到捆绑包中时，也可以对应用程序使用externals选项。例如，您想从CDN（单独的标记）使用jquery，但仍然想在捆绑包中要求（“jquery”）。只需将其指定为外部：{externals:{jquery:{jquery:}。” 然而，我在一些地方找到的文档都对如何准确地做到这一点非常挑剔。到目前为止，我不知道如何使用它来替换html中的

使用网页包：

externals

允许您为库指定 不由webpack解析，但成为输出的依赖项。这 表示它们在运行时从环境中导入

---

您可以在JS中创建脚本标记作为

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

$（“正文”）.append（$（“”）

有一个html文件肯定是用来为附加了js包的用户提供服务的。可能您可以将脚本标记附加到html文件中

externals

不允许您这样做。这意味着“不要将此资源编译到最终包中，因为我将自己包含它”

---

您需要的是脚本加载程序实现，例如。我还编写了一个简单的应用程序来比较不同的脚本加载器实现：。

我四处寻找解决方案，大多数建议都是基于外部的，这在我的案例中是无效的

在另一篇帖子中，我发布了我的解决方案：

---

换句话说，我使用了一个单独的JS文件，负责将所需文件下载到本地目录中。然后WebPack扫描此目录，并将下载的文件与应用程序捆绑在一起。

您是否可以详细说明一下，例如在何处添加外部文件？链接到一个例子将是伟大的！我没有用过它，但它看起来像是这样的：你想

要求（'jquery'）

，外部

'jquery'：'jquery'

，

npm安装jquery--save

，并让网页包在你的html中写入

（当前最新版本），而不是将所有35kb都包含在包中吗？这可能是真的，

externals

属性只允许您指定在运行时应从环境导入的资源。如何在运行时提供外部资源取决于您，而不是webpack。我给这个a+1是因为webpack的一个创建者在这里给出了相同的答案：更多的现代选项正在使用或。

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});