Webpack 和外部库

Question

我正在试用 webpack (http://webpack.github.io/)，它看起来非常不错，但是我有点卡在这里。

假设我将 CDN 用于库 f.ex jQuery。然后在我的代码中，我希望 require('jquery') 自动指向全局 jquery 实例，而不是尝试从我的模块中包含它。

我尝试过使用像IgnorePlugin这样的插件：

new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))

这适用于忽略库，但当我运行 webpacker 时，它仍然说所需的模块“丢失”。

不知何故，我需要告诉 webpack jquery 应该从全局上下文中获取。似乎是一个常见的用例，所以我有点惊讶文档没有专门针对这个。

Answer 1

根据Webpack documentation，你可以使用config对象上的externals属性来指定你的库的依赖，这些依赖不会被webpack解析，而是成为输出的依赖。这意味着它们是从运行时的环境 [原文如此]。”

该页面上的示例使用 jQuery 很好地说明了这一点。简而言之，您可以使用普通 CommonJS 样式的 jQuery：

var jQuery = require('jquery');

然后，在您的配置对象中，使用 externals 属性将 jQuery 模块映射到全局 jQuery 变量：

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

Webpack 创建的结果模块将简单地导出现有的全局变量（为简洁起见，我在这里省略了很多内容）：

{
    1: function(...) {
        module.exports = jQuery;
    }
}

我试过了，效果和描述的一样。