我正在尝试使用webpack(http://webpack.github.io/)并且它看起来非常好,但是我有点被困在这里.
假设我正在使用CDN作为库,f.ex jQuery.然后在我的代码中,我希望require('jquery')自动指向全局jquery实例,而不是尝试从我的模块中包含它.
我尝试过使用类似的插件IgnorePlugin:
new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))
这适用于忽略库,但它仍然表示当我运行webpacker时所需的模块"丢失".
不知怎的,我需要告诉webpack jquery应该从全局上下文中获取.看起来像一个常见的用例,所以我很惊讶文档没有具体针对这一点.
在发布此问题之前，我咨询了有关此主题的以下主题：
如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib，而不是在 html 文件中 如何在 Webpack 中包含 jQuery CDN？
基于以上所有内容，似乎为了通过 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 个库（为了参数）（以最大化页面加载性能）？
我目前解决这个问题的方法是在我的 index.html 文件中手动包含以下脚本标签，并带有相关的“async”和“defer”标签；但是，每次我包含一个新库时，我都需要更新我的 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> …