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文档,您可以使用externals配置对象上的属性"来指定库的依赖关系,这些依赖关系不是由webpack解析的,而是成为输出的依赖关系.这意味着它们是在运行时[sic]从环境中导入的. "

该页面上的示例使用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;
    }
}

我尝试了这个,它的工作原理与描述一致.