1.clone webpack代码到本地
const path = require('path');
module.exports = {
devtool: 'source-map', //配置source map，查看源文件
entry: { //构建入口
index: path.resolve(__dirname, 'src/index.js'),
},
output: { //构建输出到dist目录
devtoolModuleFilenameTemplate: '[resource-path]', //配置source map在浏览器中的展现方式
path: path.resolve(__dirname, 'dist/'),
},
module: { //配置loader，解析相应的文件
rules: [
{ test: /\.js$/, use: { loader: 'babel-loader', query: { presets: ['@babel/preset-env'] } } },
]
},
};
生成的
source map文件
2.启动调试项目
npm install
如果安装过程中出错，使用管理员身份再重新使用安装
image.png
package.json里有用来调试的script，直接在vscode中按F5就可以启动调试了，
windows用户会报错：
，
windows用户需要把这两条行改成
"debug:build": "node --inspect-brk=5858 node_modules/webpack/bin/webpack.js",
"debug:watch": "node --inspect-brk=5859 node_modules/webpack --watch"
因为webpack是直接安装在node_modules下的。
3.调试webpack资源加载流程
修改之后再按F5启动调试，进入到node_modules/webpack/bin/webpack.js
这个文件的逻辑是判断一下
cli是否安装了，然后去调webpack.run；然后在
150行打上断点，按F5，这里去调webpack-cli去了，然后webpack-cli又调回到webpack/lib，
后面我们不去看
weboack-cli，直接在webpack/lib/Compiler.js的199行打个断点
总体来说webpack build做了这几件事：
1.载入资源，这个过程会调用各个loader，然后用loader去载入资源文件，涉及到的模块是loader-runner
2.代码压缩，这里只看js文件，涉及到的模块是uglifyjs-webpack-plugin
3.代码生成，就是在Compiler.js中，emit了一下，存到文件中
接下来看下compile函数，跟一下资源加载过程，在536行打个断点
这里会调用
make这个hook，webpack就是用hook这种东西实现了插件化，也就是webpack只负责调一下，至于哪个插件实现了make这个hook，webpack不管的，单步调试进去看一下
跑到了
tapable这个库中，这个tapable就是webpack实现hook的模块，tapable读起来比较费力，它是用生成代码的方式做的，这个应该是兼容性和功能性的考虑，因为es6的proxy能力有限，虽然能做一些拦截，但是做不到hook这么强大也不好搞。继续，按
单步跳过（F10）到下一行，
然后
单步调试（F11）,就会跑到这里来，这个VM1372，就是tapable临时生成的代码，一般出现这种代码的时候，就意味着有人用了new Function这种东西，动态生成函数
接下来
单步跳过，单步调试进入_fn0中
进去就到了
webpack/lib/SingleEntryPlugin.js中的第43行，compiler.hooks.make.tapAsync(这个SingleEntryPlugin.js实现了make这个hook，然后Compiler.js中this.make.hooks调用时，就调到了。
总结：这里主要是从Compiler.js的compile函数，看webpack怎样从this.hooks.make.callAsync调到SingleEntryPlugin.js的compiler.hooks.make.tapAsync实现的。
中间涉及到了tapable，他提供了一个功能，让hook可以在其他地方实现，webpack只需要调一下这个hook就行了。同样的hook，可以实现多次，webpack会放到一个队列中调用。hook还有很多种类，原理是一样的，只不过处理方式不同，比如异步的，同步的。
继续下去，现在到这里了，这里直接调用了compilation.addEntry，这是webpack的另一个重要的文件，Compilation.js
进入看看，在
1028行打上断点，这里主要看这个文件，开始加载资源，
this._addModuleChain的逻辑是这样的，先加载入口文件，然后再递归加载它依赖的文件，依赖的依赖的文件，就是通过require的import的那些。
进去看
_addModuleChain，开始加载入口文件了，往下看，在943和953行打上断点
module出来了，包含了如下这些内容
request是loader，resource是待加载的资源，webpack造出module后再调用这个module的build方法来加载资源，十分的OO，不直接干，而是先搞一个factory，让factory造module，再让module自己build
这里开始
build
this.buildModule -> module.build -> doBuild最后到了
NormalModule.js的265行调了runLoaders，从loader-runner里require进来的
const { getContext, runLoaders } = require("loader-runner");
进去看看
loader-runner首先会载入那个loader，然后在用loader加载资源，例子中的是babel-loader，资源文件就是src/index.js，这个LOADER_EXECUTION就是用loader载入资源用的
fn是loader,args是源文件的内容，，然后webpack调用这个loader，babel-loader可以看做一个函数把ES6代码转译成ES5。以上就是解析入口文件，一图胜千言
参考
webpack debug：https://github.com/thzt/debug-webpack
webpack群侠传系列：https://www.jianshu.com/p/de262ad255c3
深入浅出webpack：https://wangchong.tech/webpack/
webpack4.0官方文档：https://webpack.js.org/concepts
网友评论