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'] } } },
        ]
    },
};

2.启动调试项目

npm install    

如果安装过程中出错，使用管理员身份再重新使用安装

image.png

package.json里有用来调试的script，直接在vscode中按F5就可以启动调试了，
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

总体来说webpack build做了这几件事：

1.载入资源，这个过程会调用各个loader，然后用loader去载入资源文件，涉及到的模块是loader-runner

2.代码压缩，这里只看js文件，涉及到的模块是uglifyjs-webpack-plugin

3.代码生成，就是在Compiler.js中，emit了一下，存到文件中

接下来看下compile函数，跟一下资源加载过程，在536行打个断点

总结：这里主要是从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

const { getContext, runLoaders } = require("loader-runner");

进去看看

loader-runner首先会载入那个loader，然后在用loader加载资源，例子中的是babel-loader，资源文件就是src/index.js，这个LOADER_EXECUTION就是用loader载入资源用的

参考

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