Awesome
##1.webpack中的externals vs libraryTarget vs library
我们的目的只有一个，那就是编译script标签上的模块来使用。
下面的例子有两个条件：
1.我们的模块依赖于jQuery，但是我们不希望jQuery打包到最后的文件中去
2.我们的模块要存在于全局的变量Foo上面
webpack配置如下：
module.exports = {
entry:
{
main:process.cwd()+'/example1/main.js',
},
output: {
path:process.cwd()+'/dest/example1',
filename: '[name].js',
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "Foo"
},
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
},
plugins: [
new CommonsChunkPlugin({
name:"chunk",
minChunks:2
}),
new HtmlWebpackPlugin()
]
};
1.1 externals参数
其中external配置表示我们的模块中的require('jquery')中的jquery来自于window.jQuery，也就是来自于全局对象jQuery，而不要单独打包到我们的入口文件的bundle中，在页面中我们通过script标签来引入！
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
}
1.2 libraryTarget vs library
library:在output中配置，可以指定你的库的名称
libraryTarget:指定你的模块输出类型，可以是commonjs,AMD,script形式,UMD模式
例子1：
其中我们的libraryTarget设置为var,而library设置为'Foo'。也就是表示我们把入口文件打包的结果封装到遍历Foo上面(以下例子的external全部是一样的，见webpack.config.js文件)
output: {
path:process.cwd()+'/dest/example1',
filename: '[name].js',
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "Foo"
}
我们看看打包的结果：
var Foo =
webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
var math = __webpack_require__(2);
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = jQuery
/***/ },
/* 2 */
/***/ function(module, exports) {
console.log('main1');
/***/ }
]);
从结果分析我们的目的，我们的入口文件的bunle被打包成为一个变量，变量名就是library指定的Foo。而且我们externals中指定的jQuery也被打包成为一个模块，但是这个模块是没有jQuery源码的，他的模块内容很简单，就是引用window.jQuery：
/* 1 */
/***/ function(module, exports) {
module.exports = jQuery;
/***/ },
例子2：
修改webpack配置为:
libraryTarget: "commonjs",
// name of the global var: "Foo"
library: "Foo"
根据library，libraryTarget定义，我们知道打包结果如下:
exports["Foo"] =
webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
var math = __webpack_require__(2);
function Foo() {}
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = require("jQuery");
/***/ },
/* 2 */
/***/ function(module, exports) {
console.log('main1');
/***/ }
]);
其中library指定的库的名称转化为exports["Foo"],!最后，很显然指定id为0的模块，也就是入口模块，最后得到的结果是符合commonjs规范的!
例子3：
修改webpack配置为:
// export itself to a global var
libraryTarget: "amd",
// name of the global var: "Foo"
library: "Foo"
编译结果为:
define("Foo", ["jQuery"], function(__WEBPACK_EXTERNAL_MODULE_1__) {
return webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
// var math = require(["./main1.js",'./main2.js']);
var math = __webpack_require__(2);
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
//jQuery加载由amd完成,其返回的是require('jQuery')后得到的结果
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports) {
console.log('main1');
/***/ }
])});;
很显然是符合AMD规范的，第二个参数表示依赖的模块。jQuery被打包成为：
/***/ function(module, exports) {
//jQuery加载由amd完成
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }
而__WEBPACK_EXTERNAL_MODULE_1__指的就是jQuery，其加载有amd完成，直接require!
例子4：
webpack配置为:
libraryTarget: "this",
// name of the global var: "Foo"
library: "Foo"
打包结果为:
this["Foo"] =
webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
// var math = require(["./main1.js",'./main2.js']);
var math = __webpack_require__(2);
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
(function() { module.exports = this["jQuery"]; }());
/***/ },
/* 2 */
/***/ function(module, exports) {
console.log('main1');
/***/ }
]);
此时我们的library指定为this,我们的external指定的模块编译如下:
/* 1 */
/***/ function(module, exports) {
//this.jQuery和this.Foo
(function() { module.exports = this["jQuery"]; }());
/***/ },
例子5：
webpack配置为:
libraryTarget: "umd",
// name of the global var: "Foo"
library: "Foo"
打包结果为:
//接受到第一个参数为this(编译到this上)，第二个参数就是我们的一个函数，函数参数为__WEBPACK_EXTERNAL_MODULE_1__表示我们的jQuery模块
(function webpackUniversalModuleDefinition(root, factory) {
//commonjs直接require
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("jQuery"));
//amd让define函数加载
else if(typeof define === 'function' && define.amd)
define(["jQuery"], factory);
//cmd(require,jQuery的处理由cmd处理)，直接require
else if(typeof exports === 'object')
exports["Foo"] = factory(require("jQuery"));
else
//this
root["Foo"] = factory(root["jQuery"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
// var math = require(["./main1.js",'./main2.js']);
var math = __webpack_require__(2);
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports) {
console.log('main1');
/***/ }
])
});
;
注意，从上面的分析可以知道，我们除了将入口文件打包成为特定的模块以外，其external模块(require('jQuery'))也要进行处理的,external的key是require时候模块名称，value是我们在页面中通过script引入的文件名!
官方实例如下:
{
output: { libraryTarget: "commonjs" },
externals: [
{
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]+$/,
function(context, request, callback) {
// 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"))
]
}
1.3 require数组情况
上图中我们还有很多种情况没有考虑到，如'abc.def',['abc','def']，我们按照上面的方式继续分析。
例子1：
其中我们的libraryTarget设置为var,而library设置为'Foo'。也就是表示我们把入口文件打包的结果封装到遍历Foo上面(以下例子的external全部是一样的，见webpack.config.js文件)
output: {
path:process.cwd()+'/dest/example1',
filename: '[name].js',
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "Foo"
}
其中main.js修改为如下:
var jQuery = require("jquery");
var math = require(["./main1.js",'./main2.js']);
// var math = require("./main1.js");
function Foo() {}
// ...
module.exports = Foo;
我们看看打包的结果：
var Foo =
webpackJsonpFoo([0,2],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var jQuery = __webpack_require__(1);
var math = __webpack_require__.e/* require */(1, function() {[__webpack_require__(2),__webpack_require__(3)];});
// var math = require("./main1.js");
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = jQuery;
/***/ }
]);
大部分都是和上面一样的，只是这里多了一个__webpack_require__.e方法（见下面分析），其作用就是保证模块的加载顺序！因为这里的jQuery是external表示不要单独打包进来，而是直接使用script引入，所以这里的提前加载的id为1，其就是我们的jQuery!
//提前加载external指定的jQuery，因为他是通过script直接引入，在其他模块中require
var math = __webpack_require__.e/* require */(1, function() {[__webpack_require__(2),__webpack_require__(3)];});
1.4 当require的是external中指定的数组或者'abc.def格式'
官网说明：
如果external指定为数组 ["abc", "def"],那么我们会打包成如下的格式:
module.exports = require("abc").def;
也就相当于对于abc这个external文件，我们是通过script引入的，但是我们只会引入这个模块的def部分!
实际上：
main.js如下:
var main1=require('abc');
var main1=require('def');
function Foo() {}
// ...
module.exports = Foo;
我们的webpack配置为如下：
externals:["abc", "def"],
我们require('abc')得到的结果是:
exports["Foo"] =
webpackJsonpFoo([0,1],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var main1=__webpack_require__(1);
var main1=__webpack_require__(2);
function Foo() {}
// ...
module.exports = Foo;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = require("abc");
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = require("def");
/***/ }
]);
此处结果暂时存疑，以后弄懂了会及时更新
##2. webpack_require.e方法分析
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
//0表示已经加载了这个模块，直接回调加载另外一个模块
//这样可以保证我们的第一个参数的chunk是提前加载好的!
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ // an array means "currently loading".
//数组表示模块在加载中，这时候只是添加回调而已，所以回调可以是一个数组，但是
//模块直接加载一次
/******/ if(installedChunks[chunkId] !== undefined) {
/******/ installedChunks[chunkId].push(callback);
/******/ } else {
/******/ // start chunk loading
//开始加载模块
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.async = true;
//__webpack_require__.p = "";
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"main"}[chunkId]||chunkId) + ".js";
//直接通过chunId加载模块，文件名chunkId + "." + ({"0":"main"}[chunkId]||chunkId) + ".js"
/******/ head.appendChild(script);
/******/ }
/******/ };
参考资料：