webpack externals详解

广告位招租
扫码页面底部二维码联系

在众多的webpack配置教程中,对ex【版权所有,侵权必究】【版权所有,侵权必究】ternals这个配置选项,总是一带而过本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】,把文档中提到的几种方式都复述一遍,但是【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net对于开发者而言,根本没法完全理解。本文试【作者:唐霜】【作者:唐霜】图通过一整篇文章,详细的对externa【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ls这个参数进行讲解。

原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net

几种用法本文版权归作者所有,未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】

externals这个参数的传入形式有多【转载请注明来源】本文作者:唐霜,转载请注明出处。种,但是总结而言,实际上就是array 【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。> object,reg,这三种形【转载请注明来源】【转载请注明来源】式都可以传入,前者其实是对后者的包含。

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

array形式【转载请注明来源】

【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net【转载请注明来源】本文版权归作者所有,未经授权不得转载。

数组内的每一个元素又可以是多种形式,包括转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。object, reg, functio【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】n, string四种:

本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。
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官方资料超级分散【作者:唐霜】【版权所有】唐霜 www.tangshuang.net,官网自己的解释也没有非常详细到位。这里【关注微信公众号:wwwtangshuangnet】【作者:唐霜】也先不讲每一种形式最终会起到什么作用,下【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。文再讲作用部分。

未经授权,禁止复制转载。【版权所有,侵权必究】原创内容,盗版必究。未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

object形式【本文受版权保护】

【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【未经授权禁止转载】【原创不易,请尊重版权】

上面的array中,第一个形式就是obj【原创内容,转载请注明出处】【本文首发于唐霜的博客】ect形式,可以把它直接作为extern本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】als的值。这种形式应该是绝大部分项目中【原创内容,转载请注明出处】【转载请注明来源】的配置形式。当然,也根据实际情况来使用。【未经授权禁止转载】【作者:唐霜】object形式最为复杂,因为它里面一定【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net是key: value的形式,所以像上面转载请注明出处:www.tangshuang.net【转载请注明来源】那种string的形式就不可能出现在ob【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netject形式中。function和reg著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。形式也没有出现在object中的可能性。

【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】原创内容,盗版必究。
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本文作者:唐霜,转载请注明出处。【未经授权禁止转载】g, array, object这几种形本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net式。这些例子都可以在这里【访问 www.tangshuang.net 获取更多精彩内容】(结合上面那个链接)看到,都是官方给出的本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】例子,不是我瞎说的。后面那几个以.开头的著作权归作者所有,禁止商业用途转载。【转载请注明来源】key,是指externals还可以通过原创内容,盗版必究。【作者:唐霜】对内部模块进行排除。也就是说,你的代码里【转载请注明来源】【未经授权禁止转载】面使用了require('./d')这样的代码,也可以不把d.js这个文件的【本文首发于唐霜的博客】【转载请注明来源】内容打包进来,不过它们的value值其实【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net都是的string形式。下文再讲打包结果转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。的时候会详细讲。

【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

reg形式【本文受版权保护】

转载请注明出处:www.tangshuang.net【转载请注明来源】【关注微信公众号:wwwtangshuangnet】

也就是正则匹配的形式,通过传入正则表达式本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net/reg/或者new RegExp()来著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。实现匹配。其实在上面的array形式中已【未经授权禁止转载】本文作者:唐霜,转载请注明出处。经用到了,只不过如果为了实现某种匹配,可【原创内容,转载请注明出处】【本文首发于唐霜的博客】以直接将正则reg传给externals本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。

【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net【未经授权禁止转载】【作者:唐霜】
externals: /^[a-z\-0-9]+$/

就这样就可以了。【本文受版权保护】

著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

形式对应的结果【版权所有】唐霜 www.tangshuang.net

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

每一种形式传入进去之后,执行webpac【本文受版权保护】本文版权归作者所有,未经授权不得转载。k打包,得到的bundle结果中,每个形【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net式对应的结果可能不同,最典型的就是如果你【转载请注明来源】转载请注明出处:www.tangshuang.net的bundle打算运行在node环境中,【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】你的bundle中可能使用module.【作者:唐霜】【未经授权禁止转载】exports导出接口,而如果是在浏览器【转载请注明来源】本文作者:唐霜,转载请注明出处。中,常常需要采用umd兼容方案,所以在你【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。的源码中的一句 require('underscore') 在根据不同的环境进行打包之后,bund【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】le文件里面的结果可能不同。那么,每一种【版权所有】唐霜 www.tangshuang.net【作者:唐霜】形式,对应的都是什么结果呢?

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【本文受版权保护】本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。

和output.libraryTarge【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.nett有关

转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net

在进行externals的进一步学习之前本文作者:唐霜,转载请注明出处。【作者:唐霜】,你必须对output.libraryT转载请注明出处:www.tangshuang.net【转载请注明来源】arget这个参数进行了解。librar转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】yTarget这个参数是用来确定你的bu未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ndle中,模块组织是遵循的什么规范,可【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。选项有:

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

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

【本文受版权保护】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。
var a = require('a')
module.exports = {
  a: a,
}

那么,按照commonjs2的规范打包的转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。bundle的最核心结构就会如下:

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。
module.exports = {
  a: a,
}
// 然后会在内部去采用module.exports = require('a')等形式把a require进来

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

【关注微信公众号:wwwtangshuangnet】【作者:唐霜】转载请注明出处:www.tangshuang.net原创内容,盗版必究。
this['my_a'] = {
  a: a,
}
// a则会以同样的this的方式引进来,因为这种情况下可能并不存在require这个函数

总之,output.libraryTar未经授权,禁止复制转载。【作者:唐霜】get和output.library都是著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。我们在讲解externals的时候应该关【作者:唐霜】未经授权,禁止复制转载。注的两个相关配置项。我们最长使用的模块化【本文受版权保护】【版权所有】唐霜 www.tangshuang.net方案是commonjs2和umd,前者是著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。为node环境,后者是为浏览器环境。

本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。

感觉这里还是没有讲透,如果你在浏览器端没【未经授权禁止转载】【未经授权禁止转载】有使用过requirejs或seajs这【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】种模块化引擎的话,可能有点难理解到这里。

【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】

从externals对应的bundle结著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net果中学习其使用

【作者:唐霜】【原创不易,请尊重版权】未经授权,禁止复制转载。【原创不易,请尊重版权】

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

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【本文受版权保护】

externals更多的是指定当你引用一【未经授权禁止转载】转载请注明出处:www.tangshuang.net个包的时候,这个包应该遵循上面哪一种模块著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net化方式引入。举个例子,我们的源码如下:

【关注微信公众号:wwwtangshuangnet】【本文受版权保护】【转载请注明来源】
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,输【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】出的时候会采用umd模块化方案(如果你了【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net解过umd的话),所以webpack就会【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。把我们的源码的require部分处理成如未经授权,禁止复制转载。【本文受版权保护】下的结果:

【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。
// 省略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 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netrequire的参数是jquery的时候【作者:唐霜】【版权所有】唐霜 www.tangshuang.net,使用jQuery这个全局变量引用它”,【作者:唐霜】【转载请注明来源】你可以在这里本文版权归作者所有,未经授权不得转载。详细阅读这句话:【版权所有】唐霜 www.tangshuang.netjQuery in the externals in转载请注明出处:www.tangshuang.net【作者:唐霜】dicates that your bu【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ndle will need jQuery variable in the glo本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。bal form.。转载请注明出处:www.tangshuang.net

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

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

本文作者:唐霜,转载请注明出处。【转载请注明来源】【转载请注明来源】

这是string类型,而通过object【原创不易,请尊重版权】【原创不易,请尊重版权】类型,可以规定不同模块化规范下的不同结果【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】形式:

【作者:唐霜】【转载请注明来源】【关注微信公众号:wwwtangshuangnet】【本文受版权保护】
externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  }
}

这意思就是说,你打包的时候,webpac本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】k会考虑任何可能的形式去进行匹配,你就不转载请注明出处:www.tangshuang.net原创内容,盗版必究。必去考虑应该用require(̵原创内容,盗版必究。【未经授权禁止转载】6;lodash’)还是直接【关注微信公众号:wwwtangshuangnet】【作者:唐霜】使用全局变量_来引入lodash到你的b【本文首发于唐霜的博客】【未经授权禁止转载】undle中了。

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

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

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

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

原创内容,盗版必究。【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。
externals: [
  'jquery',
  {
    underscore: true, // 虽然设置为true,实际上是因为object里面必须是key > value形式,本质上还是string形式,和前一个jquery没有什么区别
  },
  /webpack/, // 匹配webpack,只要匹配到了,实际上又转换为string形式,又采用了global形式
]

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

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

function形式怎么使用未经授权,禁止复制转载。

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

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

【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
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() // 这一句表示啥也不干
  },
]

上面这个例子,会得到【作者:唐霜】'my-local-module': 'global MyLocalModule',这个结果,你可以自己写多个if来实现多【本文受版权保护】本文作者:唐霜,转载请注明出处。个模块的配置,注意结合上面string形【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net式的知识。一般而言,一个external【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】s配置中,不要多个function,因为【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。这些function都会被调用,还不如把【本文受版权保护】【版权所有】唐霜 www.tangshuang.net全部的规则都写在一个function里面【本文受版权保护】本文作者:唐霜,转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。

global在node环境中【作者:唐霜】

著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。

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

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【本文首发于唐霜的博客】【转载请注明来源】

但是有的情况下,我们可以通过webpac【作者:唐霜】【版权所有】唐霜 www.tangshuang.netk配置中的node.global来进行配【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】置,如下:

【关注微信公众号:wwwtangshuangnet】【本文受版权保护】本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net
output: {
  libraryTarget: 'commonjs2',
},
externals: [],
target: 'node',
node: {
  global: false,
  Buffer: false,
},

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

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】

实用场景【原创内容,转载请注明出处】

【未经授权禁止转载】【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。

将node_modules目录下的所有模著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。块加入到externals中

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

这是最常用的一种场景,但不局限于node本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】_modules目录,包括bower_c原创内容,盗版必究。未经授权,禁止复制转载。omponents目录还有一些项目中特定原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】的内部模块目录,都可以采用这种方案。

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

打包的时候不把这些包打进去,有两种情况,著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net一种是你要打包的bundle是用来在no【原创内容,转载请注明出处】【作者:唐霜】de环境中运行的,另一种是在浏览器环境下原创内容,盗版必究。原创内容,盗版必究。运行的。看第一种,node环境下运行的b【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】undle的externals应该怎么写本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。
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的子模块
]

但是在浏览器环境中就比较坑,你不可能这样原创内容,盗版必究。本文作者:唐霜,转载请注明出处。去用。

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。【本文受版权保护】

浏览器环境下webpack打包bundl原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。e文件中的引用关系

转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net

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

转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】

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

【作者:唐霜】【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net

所以,大部分情况下,我们都让webpac原创内容,盗版必究。未经授权,禁止复制转载。k输出为umd的模块规范结构,这样可以让【转载请注明来源】【本文首发于唐霜的博客】bundle文件在不同的环境下运行,但是本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】虽然这样说,可externals里面的前【转载请注明来源】本文版权归作者所有,未经授权不得转载。缀影响了bundle.js外部的文件的引未经授权,禁止复制转载。【转载请注明来源】入形式,所以除非你所有的文件都是webp转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ack打包出来的,或者你就采用globa【原创不易,请尊重版权】【本文首发于唐霜的博客】l模式,否则,你一定要注意这个问题。

【版权所有,侵权必究】【作者:唐霜】转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】【版权所有,侵权必究】

最终回到我们的问题,浏览器环境下webp本文版权归作者所有,未经授权不得转载。【作者:唐霜】ack打包出来的bundle相互之间如何本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】引用呢?比如你用webpack打包了A和【作者:唐霜】原创内容,盗版必究。B,A先执行,B后执行,实际上,在web【本文首发于唐霜的博客】【版权所有,侵权必究】pack的bundle中,是这样子的(u著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】md):

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

【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】【未经授权禁止转载】
// 在config中有这样的定义
{
  jquery: '../js/jquery',
  bootstrap: '../bootstrap',
}

之后在你的amd模块中使用define并本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】传入依赖:

【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】【转载请注明来源】
define(['jquery'], () => {})

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

转载请注明出处:www.tangshuang.net【版权所有,侵权必究】未经授权,禁止复制转载。【版权所有,侵权必究】【本文受版权保护】
externals: {
  'my-test': 'MyTest'
}

key和value值是不一样的,这一点要本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net谨记。当然,如果你不想这么麻烦,那么ex【原创内容,转载请注明出处】【转载请注明来源】ternals里面应该写

【原创内容,转载请注明出处】【原创内容,转载请注明出处】【本文受版权保护】
externals: [
  'MyTest'
]

引入的时候写require(‘本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net;MyTest’),这样也可本文版权归作者所有,未经授权不得转载。【本文受版权保护】以起到对应的效果,但显然,这种仅适合gl【本文受版权保护】转载请注明出处:www.tangshuang.netobal模式,不能在amd下面运行。

著作权归作者所有,禁止商业用途转载。【转载请注明来源】【原创不易,请尊重版权】

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

【版权所有,侵权必究】【作者:唐霜】本文作者:唐霜,转载请注明出处。

小结【版权所有】唐霜 www.tangshuang.net

未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】

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

本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【作者:唐霜】

2017-03-30 50421

为价值买单,打赏一杯咖啡

本文价值504.21RMB
已有2条评论
  1. 长寿之都扬州小严 2020-10-14 12:10

    好的,谢谢,有所帮助

  2. zk922 2018-08-18 13:22

    感谢总结分享~