webpack系列之一总览

时间 2019-11-05

标签 webpack 系列之一总览繁體版

原文原文链接

做者：崔静javascript

引言

webpack 对于每一个前端儿来讲都不陌生，它将每一个静态文件当成一个模块，通过一系列的处理为咱们整合出最后的须要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)ﾉﾞ）css

写在前面的话

在阅读一个东西的源码以前，首先须要了解这个东西是什么，怎么用。这样在阅读源码过程当中才能在大脑中造成一副总体的认知。因此，先了解一下 webpack 打包先后代码发生了什么？找一个简单的例子前端

入口文件为 main.js，在其中引入了 a.js， b.jsjava

// main.js
import { A } from './a'
import B from './b'
console.log(A)
B()
复制代码

// a.js
export const A = 'a'
复制代码

// b.js
export default function () {
    console.log('b')
}
复制代码

通过 webpack 的一番蹂躏，最后变成了一个文件：bundle.js。先忽略细节，看最外面的代码结构webpack

(function(modules){
  ...(webpack的函数)
  return __webpack_require__(__webpack_require__.s = "./demo01/main.js");
})(
 {
   "./demo01/a.js": (function(){...}),
   "./demo01/b.js": (function(){...}),
   "./demo01/main.js": (function(){...}),
 }
)
复制代码

最外层是一个当即执行函数，参数是 modules。 a.js、b.js 和 main.js 最后被编译成三个函数（下文将这三个函数称为 module 函数），key 是文件的相对路径。bundle.js 会执行到 __webpack_require__(__webpack_require__.s = "./demo01/main.js"); 即经过 __webpack_require__('./demo01/main.js') 开始主入口函数的执行。web

经过 bundle.js 的主接口能够清晰的看出，对于 webpack 每一个文件就是一个 module。咱们写的 import 'xxx'，则最终为 __webpack_require__ 函数执行。更多的时候咱们使用的是 import A from 'xxx' 或者 import { B } from 'xxx' ，能够猜测一下，这个 __webpack_require__ 函数中除了找到对应的 'xxx' 来执行，还须要一个返回 'xxx' 中 export 出来的内容。json

function __webpack_require__(moduleId) {
	// Check if module is in cache
	if(installedModules[moduleId]) {
		return installedModules[moduleId].exports;
	}
	// Create a new module (and put it into the cache)
	var module = installedModules[moduleId] = {
		i: moduleId,
		l: false,
		exports: {}
	};
	// Execute the module function
	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
	// Flag the module as loaded
	module.l = true;
	// Return the exports of the module
	return module.exports;
}
复制代码

调用每个 module 函数时，参数为 module、module.exports、__webpack_require__。 module.exports 用来收集 module 中全部的 export xxx 。看 ”./demo/a.js“ 的 modulepromise

(function(module, __webpack_exports__, __webpack_require__) {

// ...
__webpack_require__.d(__webpack_exports__, "A", function() { return A; });
const A = 'a'

/***/ })

// ...
__webpack_require__.d = function(exports, name, getter) {
	if(!__webpack_require__.o(exports, name)) {
		Object.defineProperty(exports, name, {
			configurable: false,
			enumerable: true,
			get: getter
		});
	}
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function(object, property) { 
	return Object.prototype.hasOwnProperty.call(object, property); 
};
// ...
复制代码

__webpack_require__.d(__webpack_exports__, "A", function() { return A; }); 简单理解就是缓存

__webpack_exports__.A = A;
复制代码

而 __webpack_exports__ 实际为上面的 __webpack_require__ 中传入的 moule.exports, 如此，就将 A 变量收集到了 module.exports 中。如此咱们的bash

import { A } from './a.js' 
  console.log(A)
复制代码

就编译为

var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./demo/a.js"); 
  console.log(_a__WEBPACK_IMPORTED_MODULE_0__["A"])
复制代码

对于 b.js 咱们使用的是 export default，webpack 处理后，会在 module.exports 中增长一个 default 属性。

__webpack_exports__["default"] = (function () {
    console.log('b')
});
复制代码

最后 import B from './b.js 编译为

var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./demo/b.js")
Object(_b__WEBPACK_IMPORTED_MODULE_1__["default"])()
复制代码

异步加载

在 webpack 中咱们能够很方便的实现异步加载，以简单的 demo 入手

// c.js
export default {
  key: 'something'
}
复制代码

// main.js
  import('./c').then(test => {
    console.log(test)
})
复制代码

打包结果，异步加载的 c.js，最后打包在一个单独的文件 0.js 中

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
"./demo/c.js": (function(module, __webpack_exports__, __webpack_require__) {
 "use strict";
  __webpack_require__.r(__webpack_exports__);
  __webpack_exports__["default"] = ({
  		key2: 'key2'
	});
  })
}]);
复制代码

简化一下，执行的就是

var t = window["webpackJsonp"] = window["webpackJonsp"] || [])
t.push([[0], {function(){...}}])
复制代码

执行 import('./c.js') 时，实际上经过在 HTML 中插入一个 script 标签加载 0.js。 0.js 加载后会执行 window["webpackJsonp"].push 方法。在 main.js 在还有一段：

var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
jsonpArray.push = webpackJsonpCallback;
复制代码

这里篡改了一下， window["webpackJsonp"] 的 push 方法，将 push 方法外包装了一层 webpackJonspCallback 的逻辑。当 0.js 加载后，会执行 window["webpackJsonp"].push ，这时便会进入 webpackJsonpCallback 的执行逻辑。

function webpackJsonpCallback(data) {
    var chunkIds = data[0];
    var moreModules = data[1];
    // add "moreModules" to the modules object,
    // then flag all "chunkIds" as loaded and fire callback
    var moduleId, chunkId, i = 0, resolves = [];
    for(;i < chunkIds.length; i++) {
        chunkId = chunkIds[i];
        if(installedChunks[chunkId]) {
            resolves.push(installedChunks[chunkId][0]);
        }
        installedChunks[chunkId] = 0;
    }
    for(moduleId in moreModules) {
        if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            modules[moduleId] = moreModules[moduleId];
        }
    }
    if(parentJsonpFunction) parentJsonpFunction(data);
    while(resolves.length) {
        resolves.shift()();
    }
};
复制代码

在 webpackJsonpCallback 中会将 0.js 中的 chunks 和 modules 保存到全局的 modules 变量中，并设置 installedChunks 的标志位。

有两点须要详细说明的:

咱们知道 import('xxx.js') 会返一个 Promise 实例 promise，在 webpack 打包出来的最终文件中是如何处理这个 promise 的？

在加载 0.js 以前会在全局 installedChunks 中先存入了一个 promise 对象
```
installedChunks[chunkId] = [resolve, reject, promise]
复制代码
```
resolve 这个值在 webpackJsonpCallback 中会被用到，这时就会进入到咱们写的 import('./c.js').then() 的 then 语句中了。
在 main.js 中处理 webpackJsonp 过程当中还有一段特殊的逻辑：
```
jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
...
jsonpArray = jsonpArray.slice();
for(var i = 0; i < jsonpArray.length; i++)  webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
复制代码
```
也就是说若是以前已经存在全局的 window["webpackJsonp"] 那么在替换其 push 函数以前会将原有的 push 方法保存为 oldJsonpFunction，同时将已存在于 window["webpackJsonp"] 中的内容，一一执行 webpackJsonpCallback。而且在 webpackJsonpCallback 中也将异步加载的内容也会在 parentJsonpFunction 中一样执行一次
```
if(parentJsonpFunction) parentJsonpFunction(data);
复制代码
```
这样的同步意义何在？试想下面的场景，webpack 中多入口状况下，例如以下配置
```
{
 entry: {
   bundle1: 'bundle1.js',
   bundle2: 'bundle2.js'
 }
}
复制代码
```
而且 bundle1 和 bundle2 中都用到了异步加载了 0.js。并且在同一个页面中同时加载了 bundle1 和 bundle2。那么因为上面的逻辑，执行的流程以下图：

经过上图能够看到，这样设计对于多入口的地方，能够将 bundle1.js 和 bundle2.js 中异步模块进行同步，这样不只保证了 0.js 能够同时在两个文件中被引用，并且不会重复加载。

异步加载中，有两个须要注意的地方：

Promise

在 webpack 异步加载使用了 Promise。要兼容低版本的安卓，好比4.x 的代码来讲，须要有全局的 Promise polyfill。
window["webpackJsonp"]

若是一个 HTML 页面中，会加载多个 webpack 独立打包出来的文件。那么这些文件异步加载的回调函数，默认都叫 "webpackJonsp"，会相互冲突。须要经过 output.jsonpFunction 配置修改这个默认的函数名称。

webpack 编译总流程

知道上面的产出，根据产出看 webpack 的总流程。这里咱们暂时不考虑 webpack 的缓存、错误处理、watch 等逻辑，只看主流程。首先会有一个入口文件写在配置文件中，肯定 webpack 从哪一个文件开始处理。

step1 webpack 配置文件处理

咱们在写配置文件中 entry 的时候，确定写过 ./main.js 这时一个相对目录，因此会有一个将相对目录变成绝对目录的处理

step2 文件位置解析

webpack 须要从入口文件开始，顺藤摸瓜找到全部的文件。那么会有一个

step3 加载文件 step4 文件解析 step5 从解析结果中找到文件引入的其余文件

在加载文件的时候，咱们会在 webpack 中配置不少的 loaders 来处理 js 文件的 babel 转化等等，还应该有文件对应的 loader 解析，loader 执行。

step3.1 找到全部对应的 loader，而后逐个执行

处理完整入口文件以后，获得依赖的其余文件，递归进行处理。最后获得了全部文件的 module 。最终输出的是打包完成的 bundle 文件。因此会有

step4 module 合并成 chunk 中输出最终文件

根据 webpack 的使用和结果，咱们猜想了一下 webpack 中大概的流程。而后看一下 webpack 的源码，并和咱们脑中的流程对比一下。实际的 webpack 流程图以下：

对总体框架和流程有了大体的概念以后，咱们能够将源码拆分为一部分一部分来详细阅读。后续会经过一系列文章一一介绍：

底层 Tapable 介绍

webpack 的底层使用的 Tapable 用来处理各类类型的 hook，这部分主要介绍 Tapable 原理，已更新，点击查看
reslove 过程

webpack 中咱们所写的各类相对路径/绝对路径，alias 等是如何被处理，最终找到正确的执行文件的。已更新，点击查看
loaders 处理

写在 webpack 配置中，各类 loaders 如何被加载、解析；已更新 webpack loader详解1 webpack loader详解2 webpack loader详解3
module 生成

js文件如何被解析，分析出依赖，同时递归处理全部的依赖；已更新 module 生成1 module 生成2
chunk 生成

项目中各个文件之间的依赖图的生成，以及根据定义的规则，module 最终如何聚合为 chunk。已更新，点击查看
最终文件的生成

经历了上面的全部过程后，内存中保存了生成文件的各类信息，这些信息如何整合吐出最终真正执行的全部文件。已更新，点击查看