Webpack调试实践

在上一篇文章 Webpack模块解析构建流程 中，简单介绍了 Webpack 模块编译的整个流程，这一篇给大家讲讲我们写的 demo，或是项目中，我们有哪些方式可以调试 Webpack。原文发布在我的 GitHub，欢迎 star 收藏。

调试的两种方式

在开始之前先给大家说一下 webpack 的启动方式。通常我们都是通过 npm/yarn 安装 webpack、webpack-cli 等，通过 npm script 直接跑起来。如果我们想要边修改边调试，在 node_module 中修改显然比较麻烦。下面还有一种方式，我比较推荐：

1. 把 webpack 仓库 clone 到本地；
2. 参考下面这段代码，即可使用你 clone 的 webpack 进行编译构建：

/** webpack.hack.js **/
// webpack 的配置文件
const configs = require('./webpack.config.js');
// clone 下来的 webpack
const webpack = require('/path/webpack/lib/webpack');
// 启动 webpack 编译
const compiler = webpack(configs);
compiler.run();
 
/** 如果需要编译完成后打印stat，可以添加回调 **/
/** 第一种方式 **/
// 在这种方式下，可以通过在 config 中加上 watch: true 配置项开启监听模式
webpack(configs, (err, stat) => {
  console.log(stat);
});
/** 第二种方式 **/
const compiler = webpack(configs);
compiler.run((err, stat) => {
  console.log(stat);
});

1. node webpack.hack.js 就可以跑起来了。

console.log

这个大概是最容易想到的一种，但这种方式十分麻烦，而且这种方式需要你对 webpack 的源码十分熟悉才行。所以并 不推荐 这种方式。

plugin

使用 webpack 插件的形式，通过监听相应的钩子即可拿到在编译流程关键节点触发的钩子传递的参数，这也是我 推荐 的方式。即使是 node_module 中的 webpack，也可以轻松使用。关于钩子有哪些，可以参考官方文档。下面简单展示一下如何使用：

/** LogPlugin.js **/
module.exports = class LogPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap("Log", (compilation) => {
      // 打印所有的编译入口
      compilation.hooks.addEntry.tap("addEntryLog", (entry, name) => {
        console.log("addEntry ==========> ", name, entry);
      });
    });
  }
};

将该插件在配置文件中配置上，重新运行，会发现上面的代码将所有的入口文件信息给打印了出来，以这种扩展的方式打印显然比 console.log 要方便多了，不想看打印信息的时候注释掉该插件即可。当然还有很多地方是没有钩子的，比如 AST 的转换、添加依赖等地方。如果需要打印这些位置的信息，只能去代码中 console.log 了。