在众多的webpack配置教程中，对ex原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ternals这个配置选项，总是一带而过转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，把文档中提到的几种方式都复述一遍，但是【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。对于开发者而言，根本没法完全理解。本文试【原创内容，转载请注明出处】【本文首发于唐霜的博客】图通过一整篇文章，详细的对externa【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netls这个参数进行讲解。

【原创内容，转载请注明出处】【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】

几种用法【原创不易，请尊重版权】

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

externals这个参数的传入形式有多【本文首发于唐霜的博客】【本文首发于唐霜的博客】种，但是总结而言，实际上就是array 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net> object，reg，这三种形原创内容，盗版必究。【作者：唐霜】式都可以传入，前者其实是对后者的包含。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

array形式【访问 www.tangshuang.net 获取更多精彩内容】

【本文首发于唐霜的博客】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

数组内的每一个元素又可以是多种形式，包括【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。object, reg, functio【版权所有，侵权必究】【原创不易，请尊重版权】n, string四种：

转载请注明出处：www.tangshuang.net【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【本文受版权保护】

externals: [
  { // ① object形式
        a: false, // a is not external
        b: true, // b is external `module.exports = b`
        "./c": "c", // "./c" is external `module.exports = c`
        "./d": "var d", // "./d" is external `module.exports = ./d`  <-- would be syntax error
        "./f": "commonjs2 ./a/b", // "./f" is external `module.exports = require("./a/b")`
        "./f": "commonjs ./a/b", // ...same as commonjs2
        "./f": "this ./a/b", // "./f" is external `(function() { module.exports = this["./a/b"]; }())`
    },
    // Every non-relative module is external
    // abc -> require("abc")
    /^[a-z\-0-9]+$/, // ② reg形式
    function(context, request, callback) { // ③ function形式
        // Every module prefixed with "global-" becomes external
        // "global-abc" -> abc
        if(/^global-/.test(request))
            return callback(null, "var " + request.substr(7));
        callback();
    },
    "./e" // "./e" is external (require("./e")) // ④ string形式
]

该形式来自【本文首发于唐霜的博客】这里著作权归作者所有，禁止商业用途转载。，不得不说webpack官方资料超级分散【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】，官网自己的解释也没有非常详细到位。这里【未经授权禁止转载】【原创不易，请尊重版权】也先不讲每一种形式最终会起到什么作用，下著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】文再讲作用部分。

转载请注明出处：www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文受版权保护】

object形式转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创内容，转载请注明出处】原创内容，盗版必究。

上面的array中，第一个形式就是obj本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ect形式，可以把它直接作为extern本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】als的值。这种形式应该是绝大部分项目中【未经授权禁止转载】原创内容，盗版必究。的配置形式。当然，也根据实际情况来使用。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】object形式最为复杂，因为它里面一定【转载请注明来源】未经授权，禁止复制转载。是key: value的形式，所以像上面【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】那种string的形式就不可能出现在ob本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ject形式中。function和reg【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net形式也没有出现在object中的可能性。

未经授权，禁止复制转载。【作者：唐霜】【未经授权禁止转载】未经授权，禁止复制转载。未经授权，禁止复制转载。

externals: {
  a: false, // a is not external
  b: true, // b is external `module.exports = b`

  jquery: 'jQuery', // 这种最常见，下面会讲具体为什么要这样用
  lodash : { // 这种其实和上面这种是一个道理，只不过分的更细一些
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  },
  
  subtract: ['./math', 'subtract'], // 这种最少见，它是一种父子结构，本文不讲解，你只要有个印象即可
    "./c": "c", // "./c" is external `module.exports = c`
    "./d": "var d", // "./d" is external `module.exports = ./d`  <-- would be syntax error
    "./f": "commonjs2 ./a/b", // "./f" is external `module.exports = require("./a/b")`
    "./f": "commonjs ./a/b", // ...same as commonjs2
    "./f": "this ./a/b", // "./f" is external `(function() { module.exports = this["./a/b"]; }())`
}

从上面可以看出，object形式的val【作者：唐霜】转载请注明出处：www.tangshuang.netue部分，有boolean, strin本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netg, array, object这几种形转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】式。这些例子都可以在这里本文作者：唐霜，转载请注明出处。（结合上面那个链接）看到，都是官方给出的本文作者：唐霜，转载请注明出处。【作者：唐霜】例子，不是我瞎说的。后面那几个以.开头的【作者：唐霜】转载请注明出处：www.tangshuang.netkey，是指externals还可以通过【本文受版权保护】转载请注明出处：www.tangshuang.net对内部模块进行排除。也就是说，你的代码里【本文受版权保护】【版权所有】唐霜 www.tangshuang.net面使用了require('./d')这样的代码，也可以不把d.js这个文件的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。内容打包进来，不过它们的value值其实【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】都是的string形式。下文再讲打包结果【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的时候会详细讲。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】

reg形式【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。

也就是正则匹配的形式，通过传入正则表达式【原创内容，转载请注明出处】【未经授权禁止转载】/reg/或者new RegExp()来【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net实现匹配。其实在上面的array形式中已【作者：唐霜】【关注微信公众号：wwwtangshuangnet】经用到了，只不过如果为了实现某种匹配，可【版权所有，侵权必究】【原创内容，转载请注明出处】以直接将正则reg传给externals著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。：

【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

externals: /^[a-z\-0-9]+$/

就这样就可以了。转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

形式对应的结果转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

每一种形式传入进去之后，执行webpac【版权所有】唐霜 www.tangshuang.net【转载请注明来源】k打包，得到的bundle结果中，每个形【原创不易，请尊重版权】【本文受版权保护】式对应的结果可能不同，最典型的就是如果你【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的bundle打算运行在node环境中，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net你的bundle中可能使用module.原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。exports导出接口，而如果是在浏览器本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net中，常常需要采用umd兼容方案，所以在你【版权所有，侵权必究】【转载请注明来源】的源码中的一句 require('underscore') 在根据不同的环境进行打包之后，bund未经授权，禁止复制转载。【原创不易，请尊重版权】le文件里面的结果可能不同。那么，每一种著作权归作者所有，禁止商业用途转载。【作者：唐霜】形式，对应的都是什么结果呢？

著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net

和output.libraryTarge原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。t有关

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文受版权保护】本文作者：唐霜，转载请注明出处。

在进行externals的进一步学习之前【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】，你必须对output.libraryT【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。arget这个参数进行了解。librar未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。yTarget这个参数是用来确定你的bu本文作者：唐霜，转载请注明出处。【本文受版权保护】ndle中，模块组织是遵循的什么规范，可【版权所有，侵权必究】转载请注明出处：www.tangshuang.net选项有：

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】未经授权，禁止复制转载。

• “var” &#【未经授权禁止转载】转载请注明出处：www.tangshuang.net8211; Export by sett【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ing a variable: var 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。Library = xxx (defau【原创内容，转载请注明出处】未经授权，禁止复制转载。lt)
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。【版权所有，侵权必究】
• “this” &【原创不易，请尊重版权】未经授权，禁止复制转载。#8211; Export by set【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ting a property of t未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nethis: this[“Lib原创内容，盗版必究。【原创不易，请尊重版权】rary”] = xxx
【原创内容，转载请注明出处】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
• “commonjs̶转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。1; – Export by【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】 setting a property 【未经授权禁止转载】【本文首发于唐霜的博客】of exports: exports[【作者：唐霜】【版权所有，侵权必究】“Library”转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net;] = xxx
原创内容，盗版必究。【本文受版权保护】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创不易，请尊重版权】
• “commonjs2R转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net21; – Export b原创内容，盗版必究。转载请注明出处：www.tangshuang.nety setting module.exp【未经授权禁止转载】原创内容，盗版必究。orts: module.exports本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】 = xxx
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
• “amd” &#著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net8211; Export to AMD 未经授权，禁止复制转载。【转载请注明来源】(optionally named &#本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】8211; set the name v【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ia the library optio【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netn)
本文作者：唐霜，转载请注明出处。【本文受版权保护】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net
• “umd” &#【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net8211; Export to AMD,著作权归作者所有，禁止商业用途转载。【本文受版权保护】 CommonJS2 or as pro【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netperty in root
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net

当你的libraryTarget值为co著作权归作者所有，禁止商业用途转载。【转载请注明来源】mmonjs2的时候，你的bundle最【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。终会以module.exports导出整【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】个bundle模块，这种情况大部分是在n本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ode环境下运行，在amd下也是OK的，【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。但是amd下，大多需要有define作为原创内容，盗版必究。【未经授权禁止转载】包裹，因此你也看到，上面会有一个amd的原创内容，盗版必究。【本文受版权保护】单独选项。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 比如说，你的源码是如下的：【作者：唐霜】

原创内容，盗版必究。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

var a = require('a')
module.exports = {
  a: a,
}

那么，按照commonjs2的规范打包的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】bundle的最核心结构就会如下：

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】

module.exports = {
  a: a,
}
// 然后会在内部去采用module.exports = require('a')等形式把a require进来

但是如果你按照this这种方式打包，那么本文作者：唐霜，转载请注明出处。【转载请注明来源】结果又会不一样，你需要注意webpack未经授权，禁止复制转载。未经授权，禁止复制转载。配置中的output.library这个原创内容，盗版必究。【本文首发于唐霜的博客】参数，比如你的library设置为未经授权，禁止复制转载。【本文首发于唐霜的博客】217;my_a’，那么你最【关注微信公众号：wwwtangshuangnet】【作者：唐霜】终得到的bundle结果中，核心的部分应【本文首发于唐霜的博客】原创内容，盗版必究。该是：

本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

this['my_a'] = {
  a: a,
}
// a则会以同样的this的方式引进来，因为这种情况下可能并不存在require这个函数

总之，output.libraryTar本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。get和output.library都是【转载请注明来源】原创内容，盗版必究。我们在讲解externals的时候应该关【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】注的两个相关配置项。我们最长使用的模块化未经授权，禁止复制转载。【转载请注明来源】方案是commonjs2和umd，前者是【作者：唐霜】本文版权归作者所有，未经授权不得转载。为node环境，后者是为浏览器环境。

【未经授权禁止转载】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

感觉这里还是没有讲透，如果你在浏览器端没【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net有使用过requirejs或seajs这【本文受版权保护】著作权归作者所有，禁止商业用途转载。种模块化引擎的话，可能有点难理解到这里。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

从externals对应的bundle结【本文受版权保护】未经授权，禁止复制转载。果中学习其使用

未经授权，禁止复制转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。【本文受版权保护】

上面一段是解释webpack打包成bun【作者：唐霜】本文作者：唐霜，转载请注明出处。dle后，bundle本身要怎样像外提供本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】接口。但是这跟我们externals没有【原创不易，请尊重版权】原创内容，盗版必究。核心关系，不过可以因此了解不同的模块化规【未经授权禁止转载】【本文受版权保护】范在webpack中的打包结果。

【版权所有，侵权必究】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

externals更多的是指定当你引用一【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】个包的时候，这个包应该遵循上面哪一种模块【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】化方式引入。举个例子，我们的源码如下：

原创内容，盗版必究。【本文首发于唐霜的博客】原创内容，盗版必究。

const $ = require("jquery")
$("#content").html("<h1>hello world</h1>")

这里我们使用了【原创不易，请尊重版权】require('jquery')来引入jquery，但是实际上我们不希望未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。把jquery打包进bundle。但是怎【本文首发于唐霜的博客】未经授权，禁止复制转载。么把jquery引进来呢？那就得看你的e【原创不易，请尊重版权】【未经授权禁止转载】xternals是怎么配置的了。比如说j【作者：唐霜】著作权归作者所有，禁止商业用途转载。query，你在源码里是上面这样使用的，【本文首发于唐霜的博客】【原创不易，请尊重版权】那么你就得配置，怎么配置？

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net

output: {
  libraryTarget: 'umd',
},
externals: {
  jquery: 'jQuery',
},

上面这种配置方法，告诉webpack，输【原创不易，请尊重版权】【本文首发于唐霜的博客】出的时候会采用umd模块化方案（如果你了【未经授权禁止转载】【本文首发于唐霜的博客】解过umd的话），所以webpack就会【本文首发于唐霜的博客】未经授权，禁止复制转载。把我们的源码的require部分处理成如【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。下的结果：

【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

// 省略umd部分...
({
  0: function(...) {
    var jQuery = require(1);
    /* ... */
  },
  1: function(...) {
    // 很明显这里是把window.jQuery赋值给了module.exports
    // 因此我们便可以使用require来引入了。
    module.exports = jQuery;
  },
  /* ... */
});

externals: {jquery: 'jQuery'}这个里面的jquery是指【本文受版权保护】require('jquery')中的jquery，而jQuery就是上面【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。代码中的红色字。简单翻译一下，就是说“当【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】require的参数是jquery的时候【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，使用jQuery这个全局变量引用它”，著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】你可以在这里未经授权，禁止复制转载。详细阅读这句话：原创内容，盗版必究。jQuery in the externals in【作者：唐霜】转载请注明出处：www.tangshuang.netdicates that your bu原创内容，盗版必究。【原创不易，请尊重版权】ndle will need jQuery variable in the glo转载请注明出处：www.tangshuang.net【转载请注明来源】bal form.。【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

当然，之所以是引用全局变量jQuery是【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】因为你的采用externals stri本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ng类型时，没有规定你要采用哪种模块化形【转载请注明来源】【关注微信公众号：wwwtangshuangnet】式。这其实在前面的代码里面提到了，假如说转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net你的value值为'commonjs2 jquery'，那么bundle结果的地方就不是直接使本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】用module.exports = jQuery了，而应该会使用本文版权归作者所有，未经授权不得转载。module.exports = require('jquery')，这就是使用string形式的区别。这里未经授权，禁止复制转载。未经授权，禁止复制转载。也提醒你，当你打包一个给node使用的包【本文受版权保护】【原创不易，请尊重版权】时，应该要在externals的stri本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ng类型中加入commonjs前缀。你可著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】以在这里【作者：唐霜】看到，有【原创内容，转载请注明出处】global, commonjs, commonjs2, amd这四种，但是从上面的官方示例代码来看，本文版权归作者所有，未经授权不得转载。var和原创内容，盗版必究。this也是支持的，global是默认的，所以上【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】面的jQuery是指全局变量。具体每种形【本文首发于唐霜的博客】未经授权，禁止复制转载。式的输出形式，可以在上面“object形【作者：唐霜】【版权所有】唐霜 www.tangshuang.net式”那一节的示例代码里看到。

【转载请注明来源】【转载请注明来源】【本文受版权保护】

这是string类型，而通过object本文作者：唐霜，转载请注明出处。【本文受版权保护】类型，可以规定不同模块化规范下的不同结果【本文受版权保护】【作者：唐霜】形式：

本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  }
}

这意思就是说，你打包的时候，webpac【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。k会考虑任何可能的形式去进行匹配，你就不【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】必去考虑应该用require(̵著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。6;lodash’)还是直接本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。使用全局变量_来引入lodash到你的b本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】undle中了。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【作者：唐霜】

理解了上面这些之后，无论是在array形著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。式里面，还是在object形式里面，甚至【转载请注明来源】【本文受版权保护】function形式里面，只要是为了返回未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。一个key => string v本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netalue形式，甚至只是string形式，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。都遵循这些模块化规范的规则，包括func【本文受版权保护】【原创内容，转载请注明出处】tion形式里面，你可以看到示例代码里面【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，其实也会考虑在callback的参数中【关注微信公众号：wwwtangshuangnet】【作者：唐霜】，加入commonjs作为前缀。

原创内容，盗版必究。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net

知道了这些，我相信你已经对采用strin【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】g类型的形式的使用方法很了解了，那你也就【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。掌握了externals的精髓部分了。
本文作者：唐霜，转载请注明出处。【本文受版权保护】 需要注意的是，下面这几种形式，本质上也【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net是string形式，而且采用global本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】引入：

【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

externals: [
  'jquery',
  {
    underscore: true, // 虽然设置为true，实际上是因为object里面必须是key > value形式，本质上还是string形式，和前一个jquery没有什么区别
  },
  /webpack/, // 匹配webpack，只要匹配到了，实际上又转换为string形式，又采用了global形式
]

上面这个配置里面有一个reg，这个多补一原创内容，盗版必究。【版权所有，侵权必究】句：正则匹配会匹配到多个结果，比如你匹配【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。以”webpac”【版权所有，侵权必究】【原创不易，请尊重版权】;开头的所有模块，那么所有的webpac原创内容，盗版必究。【本文受版权保护】k插件都会被匹配到，那么在你的bundl本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】e中，这些模块也就全都使用向上面这里的&【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。#8217;jquery’这本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】种形式，实际上也就是global+str本文版权归作者所有，未经授权不得转载。【本文受版权保护】ing形式。

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

function形式怎么使用本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net【本文受版权保护】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net

上面提到了两次function形式，但是【版权所有】唐霜 www.tangshuang.net【转载请注明来源】没有讲具体怎么用，这里讲一下，毕竟网上很著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】少有资料对此进行单独详细的讲解。
未经授权，禁止复制转载。【作者：唐霜】 我们来看下function的使用场景：本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。只能在array形式中作为一个元素传入。

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

externals: [
  /**
  @param context: 相当于this，即上下文，具体引用的是webpack的compiler还是其他对象，没有深入研究，一般也用不到
  @param request: 源码中require的参数，比如源码中使用了require('webpack/libs/...')，那么request就是括号里面的字符串
  @param callback: 回调通知函数，执行这个函数，相当于告诉webpack，这个external规则完毕，可以进行下一个规则
  */
  
  function(context, request, callback) {
    if(request === 'my-local-module') callback(null, 'global MyLocalModule')
    // 这一句一出，相当于webpack会把整条external规则写成：'my-local-module': 'global MyLocalModule'，恢复成我们熟悉的string形式，这里的global前缀其实可以不用写，因为默认就是global
    callback() // 这一句表示啥也不干
  },
]

上面这个例子，会得到【版权所有】唐霜 www.tangshuang.net'my-local-module': 'global MyLocalModule'，这个结果，你可以自己写多个if来实现多【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】个模块的配置，注意结合上面string形【版权所有，侵权必究】转载请注明出处：www.tangshuang.net式的知识。一般而言，一个external【本文首发于唐霜的博客】【本文受版权保护】s配置中，不要多个function，因为著作权归作者所有，禁止商业用途转载。【本文受版权保护】这些function都会被调用，还不如把未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】全部的规则都写在一个function里面【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。。

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】

global在node环境中原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】原创内容，盗版必究。

当你的bundle中直接出现【转载请注明来源】module.exports = underscore，你会发现，在你的node全局变量里没有著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。underscore这个全局变量，所以当本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。你遇到这种情况时，一定要注意在exter本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】nals规则里面使用commonjs这个【作者：唐霜】【作者：唐霜】前缀。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。

但是有的情况下，我们可以通过webpac【转载请注明来源】【作者：唐霜】k配置中的node.global来进行配【本文受版权保护】【转载请注明来源】置，如下：

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【转载请注明来源】

output: {
  libraryTarget: 'commonjs2',
},
externals: [],
target: 'node',
node: {
  global: false,
  Buffer: false,
},

其实上面的target=node和nod本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。e选项跟externals没有直接的关系转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，但是由于target: node会影响【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】所有的文件引入方式，所有的引入都会采用r转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netequire的形式，唯独external【原创内容，转载请注明出处】未经授权，禁止复制转载。s的哪些模块会根据你配置的externa【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ls来确定，所以很有可能你就会出现上面我【作者：唐霜】原创内容，盗版必究。说的module.exports = underscore的情况。而如果把node.global设转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。置为false，就可以避免这种情况，也就转载请注明出处：www.tangshuang.net【本文受版权保护】是说，“在target为node的时候，把nod转载请注明出处：www.tangshuang.net【未经授权禁止转载】e.global设置为false，ext【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ernals中的global前缀将不生效”，所以所有的module都会遵照nod【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。e环境中的特殊处理，即使用require【原创不易，请尊重版权】未经授权，禁止复制转载。来引入模块。这样一来，即使你的exter【作者：唐霜】本文版权归作者所有，未经授权不得转载。nals配置中直接传入了一个string【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。形式，没有给commonjs前缀，也不用【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。担心默认使用global模式带来的负面影【版权所有，侵权必究】【本文受版权保护】响，因为所有的引入都会强制使用requi【版权所有，侵权必究】【原创内容，转载请注明出处】re。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】

实用场景【原创不易，请尊重版权】

【原创不易，请尊重版权】【作者：唐霜】【版权所有，侵权必究】

将node_modules目录下的所有模【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net块加入到externals中

【作者：唐霜】【本文受版权保护】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

这是最常用的一种场景，但不局限于node未经授权，禁止复制转载。【本文首发于唐霜的博客】_modules目录，包括bower_c【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】omponents目录还有一些项目中特定【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net的内部模块目录，都可以采用这种方案。

【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

打包的时候不把这些包打进去，有两种情况，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】一种是你要打包的bundle是用来在no本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】de环境中运行的，另一种是在浏览器环境下【原创内容，转载请注明出处】【原创不易，请尊重版权】运行的。看第一种，node环境下运行的b【版权所有】唐霜 www.tangshuang.net【作者：唐霜】undle的externals应该怎么写本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

externals: [
  // ... 其他规则
  // 方案一，使用reg形式
  /^[a-z\-0-9]+$/,
  // 假如你的源码中全部require的模块（不以.开头）都是node_modules目录下的模块
  // 但是你得注意上面说的global的负面影响，因此，这种方案是最烂选择
  // 方案二，使用function
  function(context, request, callback) {
    if(request.substr(0, 1) !== '.') callback(null, 'commonjs ' + request)
    callback()
  },
  // 这种方案比较好的一点，是把前缀强制使用commonjs，
  // 但是有一个缺点，就是你没法直接通过request判断这个模块是不是node_modules目录下的，我们只能假设项目里面的模块全部是使用node_modules目录下的
  // 因此这种方案也不是最佳实践
  // 方案三，使用动态运算返回object形式
  function() {
    var exts = {}
    fs.readdirSync(__dirname + '/node_modules').forEach(function(item) { // 我没有使用es6
      if(item.indexOf('.') === 0) return
      exts[item] = 'commonjs ' + item
    })
    return exts
  } (),
  
  // 这种方案直接定位到node_modules目录，而且加入了前缀commonjs，因此非常准确的满足了我们的需求
  // 缺点就是写一个函数，显得复杂一些
  // 如果仅在externals中只有这一条规则，可以将这个结果提到最顶层
  // 但是这种方案无法满足require('webpack/libs/...')这种引用子模块的形式
  // 目前而言，应该考虑一个组合方案，就是将方案三和function结合起来，方案三解决module引入问题，同时记录本地都有哪些modules，function则解决匹配路径问题，因为已经知道了本地的modules列表，所以很容易判断require的是不是本地modules的子模块
]

但是在浏览器环境中就比较坑，你不可能这样著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。去用。

著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【原创不易，请尊重版权】

浏览器环境下webpack打包bundl【原创不易，请尊重版权】原创内容，盗版必究。e文件中的引用关系

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

所谓global模式，就是在window【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net对象上挂一个变量，然后直接就可以使用这个本文作者：唐霜，转载请注明出处。【作者：唐霜】全局变量。d3就是一个很好的例子。当你在【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。源码中使用require(‘原创内容，盗版必究。【原创内容，转载请注明出处】d3’)之后，可以直接把d3【原创不易，请尊重版权】【原创不易，请尊重版权】加入到externals中，得到一个打包【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】文件bundle.js，但是在引入这个b【未经授权禁止转载】本文作者：唐霜，转载请注明出处。undle.js到浏览器之前，你一定要先本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】引入d3的库文件，d3库文件会创建一个全【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】局变量d3，而你的bundle.js中e【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。xternal的d3实际上是global【未经授权禁止转载】原创内容，盗版必究。模式，所以实际上bundle.js在引入未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netd3的时候，就会直接从全局变量去引用，即module.exports = d3。这样就完美的将bundle和库结合在一本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。起。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

但是在amd模块化引擎require.j著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。s环境中，你就不能这么干，你如果webp【未经授权禁止转载】【原创不易，请尊重版权】ack打包的时候选择了amd模式，而非g著作权归作者所有，禁止商业用途转载。【转载请注明来源】lobal或umd模式，那么所有的模块都【版权所有，侵权必究】【原创不易，请尊重版权】会按照require.js的规范来引入，著作权归作者所有，禁止商业用途转载。【作者：唐霜】即使用module.exports = require('d3')来引入，这个时候d3库文件不是amd规范【作者：唐霜】【转载请注明来源】的，所以你的bundle.js文件中这里【作者：唐霜】原创内容，盗版必究。会报错，会说找不到d3这个模块，这是am【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】d模块化规范引起的，这种情况下，你必须让【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。你的d3也支持amd模块规范才可以。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】

所以，大部分情况下，我们都让webpac本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netk输出为umd的模块规范结构，这样可以让【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。bundle文件在不同的环境下运行，但是著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net虽然这样说，可externals里面的前【作者：唐霜】本文作者：唐霜，转载请注明出处。缀影响了bundle.js外部的文件的引【未经授权禁止转载】【本文首发于唐霜的博客】入形式，所以除非你所有的文件都是webp【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ack打包出来的，或者你就采用globa【关注微信公众号：wwwtangshuangnet】【本文受版权保护】l模式，否则，你一定要注意这个问题。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

最终回到我们的问题，浏览器环境下webp本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ack打包出来的bundle相互之间如何【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。引用呢？比如你用webpack打包了A和【未经授权禁止转载】【本文受版权保护】B，A先执行，B后执行，实际上，在web未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netpack的bundle中，是这样子的（u【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】md）：

【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object') // commonjs, module.exports导出模块
        module.exports = factory();
    else if(typeof define === 'function' && define.amd && define.cmd) // amd or cmd
        define([], factory);
    else if(typeof exports === 'object') // other support export的模块化解决方案
        exports["MyTest"] = factory();
    else // 啥模块化都不支持，直接挂在this上，this在浏览器环境下就指向window
        root["MyTest"] = factory();
 })(this, function() {...

A和B的bundle文件结构都是上面这种【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】情况，所以，如果你单纯的通过script【作者：唐霜】【原创不易，请尊重版权】 src引入文件，那么A就会走root[未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。A]，即在window上注册了一个全局变转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net量，而如果B中引用了A，就会像文章前面说本文作者：唐霜，转载请注明出处。【未经授权禁止转载】的一样，有一个module.exports = A在B的bundle中，这种方式就是通过引本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net用一个全局变量来实现模块的引用，B引用A本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】就是这么简单。而如果是在amd或cmd模原创内容，盗版必究。【未经授权禁止转载】块化引擎支持下，就会走define。am著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。d和cmd的依赖是通过define的参数未经授权，禁止复制转载。【原创不易，请尊重版权】来确定的，比如define('B', ['A'], () => {})就是说当前模块的名字是B，并且依赖A模块转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。。但是实际上amd和cmd中，第一个参数【未经授权禁止转载】本文作者：唐霜，转载请注明出处。不设置，因为设置了会有问题，模块的名称如【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。果不使用相对路径的话，都会在config原创内容，盗版必究。【本文受版权保护】中配置，比如说：

著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net

// 在config中有这样的定义
{
  jquery: '../js/jquery',
  bootstrap: '../bootstrap',
}

之后在你的amd模块中使用define并转载请注明出处：www.tangshuang.net原创内容，盗版必究。传入依赖：

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【作者：唐霜】

define(['jquery'], () => {})

而如果是本地的（也就是webpack打包【未经授权禁止转载】本文作者：唐霜，转载请注明出处。的bundle），则可以使用路径依赖，或【作者：唐霜】原创内容，盗版必究。者使用require来引用，比如：

未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

define(['./my-moduleA'], A => {
  // 可以用A了
})
// 等价于
define((module, exports, require) => {
  var A = require('./my-moduleA')
  // 可以用A了
})

而./my-moduleA.js这个文件转载请注明出处：www.tangshuang.net【转载请注明来源】，就是我们用webpack打包出来的，它【原创内容，转载请注明出处】【原创内容，转载请注明出处】跟你的当前引用的文件处于同一个目录下。不【未经授权禁止转载】原创内容，盗版必究。过这种情况很少出现在我们自己写代码过程中未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net，因为我们很少再去依赖require.j著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。s写代码了，我们现在都是直接采用comm【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】onjs模块化规范，然后用webpack【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。打包成一个文件引用执行。为什么要讲amd本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的东西呢？因为知道这个之后，我们就不用考【本文受版权保护】著作权归作者所有，禁止商业用途转载。虑output.library这个配置项【作者：唐霜】本文作者：唐霜，转载请注明出处。在amd模块化引擎下怎么办了，我们可以记【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。住：output.library主要是给【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】global模式使用，也就是上面示例代码著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net中的root[‘MyTest著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。’]使用。因此，output【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。.library不能配置成连接符-连接的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。名称，而一定要使用驼峰或下划线，因为它的【本文受版权保护】【本文受版权保护】值可能在另一个模块中被当做一个全局变量被【原创内容，转载请注明出处】原创内容，盗版必究。引用。同样的道理，当你在另一个模块中打算【版权所有，侵权必究】【版权所有，侵权必究】引用MyTest这个全局变量时怎么办呢？本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netMyTest对应的文件名是my-test本文作者：唐霜，转载请注明出处。【作者：唐霜】.js，引用的时候使用require('my-test')。这是你在配置externals的时候，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。就需要注意，要写成：

【作者：唐霜】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net

externals: {
  'my-test': 'MyTest'
}

key和value值是不一样的，这一点要本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】谨记。当然，如果你不想这么麻烦，那么ex【作者：唐霜】【版权所有】唐霜 www.tangshuang.netternals里面应该写

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【版权所有，侵权必究】【原创不易，请尊重版权】

externals: [
  'MyTest'
]

引入的时候写require(‘【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】;MyTest’)，这样也可本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】以起到对应的效果，但显然，这种仅适合gl本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】obal模式，不能在amd下面运行。

【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

怎么排除打包node_modules目录【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】下的模块呢？其实和上面的方案是一样的，但【本文首发于唐霜的博客】【转载请注明来源】是你必须确保，你external的nod【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。e_modules下面的模块，都采用了正【转载请注明来源】【原创内容，转载请注明出处】确的方式来适应你bundle.js中的引【转载请注明来源】著作权归作者所有，禁止商业用途转载。用，比如jquery这个库就很好，默认支【本文首发于唐霜的博客】【原创不易，请尊重版权】持了amd。但是underscore就仅【版权所有】唐霜 www.tangshuang.net【本文受版权保护】支持global，所以，如果你的项目中使著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】用了underscore，而又是在amd【原创内容，转载请注明出处】未经授权，禁止复制转载。引擎驱动下运行你的脚本，最好的办法，是把【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netunderscore用webpack打包本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。一次，可以使用webpack的一些com【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】mon相关插件来实现第三方库的分离。当然【本文受版权保护】未经授权，禁止复制转载。，这要你很熟的情况下进行。

【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有，侵权必究】

小结【原创内容，转载请注明出处】

【本文受版权保护】【原创内容，转载请注明出处】【转载请注明来源】

本文讲解了那么多，说到底，最终其实只要抓未经授权，禁止复制转载。【作者：唐霜】住一个点，就是“string形式里面的前本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net缀所带来的打包结果中的引入方式”，就可以原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。吃透externals的配置问题了。而作【转载请注明来源】原创内容，盗版必究。为string形式的变体，functio原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。n形式和reg形式可以实现一次性多个匹配【未经授权禁止转载】原创内容，盗版必究。，虽然他们本质上还是遵循string形式原创内容，盗版必究。【未经授权禁止转载】那一套。但是如果不认真的去思考，根本很难【原创内容，转载请注明出处】【版权所有，侵权必究】理解到这一点。这也是为什么网上很多文章对本文作者：唐霜，转载请注明出处。【转载请注明来源】externals这个配置提一下就不深入【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。的原因。

原创内容，盗版必究。【转载请注明来源】【本文首发于唐霜的博客】

2017-03-30 50520 webpack