webpack工作流程
先祭出之前画的webpack工作流程图
webpack工作流程.png
源码分析
webpack源码很多，看着看着就被各种类、设计模式绕晕了。所以这篇文章会以webpack的打包流程为主线，分析每个环节的代码所在的位置、大致做了哪些事情。
1.执行webpack命令
一般来说我们都会在项目的package.json中配置一条打包命令，如：
"build": "node_modules/.bin/webpack --config webpack.prod.js",
当我们执行npm run build后，先会执行bin/webpack.js这个文件，内部会执行lib/webpack.js这个文件。
2.初始化参数
在webpack.js中，会读取初始参数并校验
const webpack = (options, callback) => {
const webpackOptionsValidationErrors = validateSchema(
webpackOptionsSchema,
options
);
if (webpackOptionsValidationErrors.length) {
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
}
// ...
};
webpack函数的options参数就是我们命令中配置的webpack.prod.js这个文件的内容，webpack拿到数据后会利用webpackOptionsSchema进行json数据内容的校验。
3.确定编译入口文件
编译前webpack会先注册内部、外部插件；
其中内部插件在WebpackOptionsApply.js中注册，然后会触发相应的hook调用EntryOptionPlugin插件；
通过entry插件程序开始从入口文件编译。
4.编译文件
编译时会用到compilation(编译对象)，调用它的_addModuleChain从入口进行编译，它会利用moduleFactory将文件构建成module如NormalModule；
接着调用module的build方法编译当前模块；
最后找到模块的依赖模块并循环构建这些依赖形成递归；
说明：
module的build方法会先使用匹配到的loaders进行代码转换，然后交给Parser.js模块；
Parser利用acron解析module的抽象语法树，然后walk出模块的所有dependencies并将其设置在module中。
5.输出资源
执行完编译文件阶段后，我们得到了一棵根结点为入口模块的依赖树，并且树上的结点都是经过编译的；
最后调用compilation.seal将这棵树上的代码打包至一个bundle.js文件中。
bundle文件大致结构
(function (modules) {
var installedModules = {};
function __webpack_require__(moduleId) {}
// Load entry module and return exports
return __webpack_require__(0);
})(
[
function (module, __webpack_exports__, __webpack_require__) {
console.log('module1');
},
function (module, __webpack_exports__, __webpack_require__) {
console.log('module2');
}
]
)
bundle文件中定义了一个自执行函数，然后调用这个函数传递了一个数组作为参数，数组中的每一项都是打包后的模块代码；
自执行函数中有一个installedModules对象缓存已加载的模块，还有一个__webpack_require__是加载模块的方法，最后加载了模块0也就是我们的入口模块作为业务程序的开始。
手写一个打包工具
git地址：https://github.com/shejiJiang/mini-webpack
最后我参考webpack的打包流程，手写了一个简单的打包工具。抛弃了webpack的一堆概念，把打包流程代码全写在了lib/webpack.js文件中；
在webpack.js定义了一个打包方法，会调用buildModule方法从入口开始编译模块，然后调用bundle方法进行打包，最后调用output输出；
其中buildModule是一个递归执行的过程，它会先利用@babel/parser解析ast，再利用@babel/core编译代码，然后利用@babel/traverse找到模块的依赖，最后对每个依赖模块递归执行buildModule进行编译。
网友评论