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 了。