Webpack之externals

在webpack.config.js中externals该如何理解呢？官方解析如下：

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。此功能通常对 library 开发人员来说是最有用的，然而也会有各种各样的应用程序用到它。

读了之后觉得，好像是用来排除某此引用的。继续学习配置方法:

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

其解释如下：

此语法用于描述所有外部 library 可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。

真是不明所以，不知所云啊。无奈，只有自己写例子验证：
1.先写个index.js

import $ from 'jquery';
function showMe() {
console.log($('div'))
$('div')[0].innerHTML = "jquery coming";
}
showMe();

再写个html,如下：

这个html的意思是引入打包后的bundle.js.同时也引入CND也就是网络中的jquery,当然，这里亦可以是父模块或其它library;
使用webpack打包后，在IE中打开这个html文件，显示正常，再看打包的bundle.js文件，只有4k左右大小。如果在webpack.config.js中不加上externals中的jquery配置，那么bundle.js会有100多k!

这就说明了externals的作用：

1.externals中的配置，一般代表此引用来自外部library,其中属性名为模块名,属性值为变量名.
上文中jquery代表模块名必须是对应真实的jquery模块名;在amd模块中，你会这么写require(['jquery'],function),ES6中你会写import _ from 'jquery',所以这个jquery并不是随意定义的；）。

2.externals代表不打包bundle.js中的模块。示例中加入了jquery:'jQuyer'，那么webpack就会在遇到引用jquery的模块时，不将其打包入bundle.js中。所以jquery代表的是模块名，一定不能写错。

3.上文中lodash的配置又是什么意思呢？属性名lodash代表lodash模块，对应的{}对象，分别标明了在不同规范下引用的各自的全局变量名称。

4.jquery代表模块名，那么jQuery是什么意思呢？
jQuery代表全局变量名，可随意定义。其实，在上文模块中，也可以直接使用jQuery来替换$,这样的话即代表使用jQuery这个全局变量，你甚至连Import或require都不用写；这样的话，由于你未加入import、require这样的显示依赖，那么你也无需在externals中添加jquery:"jQuery"这种配置。