本系列文章記錄了我在webpack源碼學習過程中遇到的事情，
正如前幾篇文章介紹的那樣，
一路上我遇到了很多“江湖人物”。

例如，Compiler，Compilation，loader-runner，babel-loader，
tapable，uglifyjs-webpack-plugin，worker-farm，cacahe，extract-text-webpack-plugin，等等。

所以我們可以說，webpack江湖是由這些“人物”組成的，而不是由文本組成的，
這正是面向對象編程，和模塊化編程的精髓所在。

就好比金庸先生的武俠小說，
引人入勝的故事情節(jié)，離不開鮮活的人物形象。

在代碼的世界中，
我們看到的各種“人物”，也是真實存在的，
它們反映了作者對信息組織方式的理解和認知。

故事由哪些人物組成，主線劇情是什么，
哪些情節(jié)要詳細介紹，哪些應該略過不表，
這些都是把故事講清楚而不得不考慮的事情。

本文我們繼續(xù)學習webpack源碼，
了解webpack是怎樣watch文件變更的。

1. 修改npm scripts

1.1 加入watch命令

我們修改debug-webpack項目的package.json，增加一個新的npm scripts，

{
  ...
  "scripts": {
    ...
    "watch": "webpack --watch"
  },
  ...
}

這樣我們就可以使用npm run watch來調用 node_modules/.bin/webpack --watch了。

1.2 執(zhí)行watch

我們在項目根目錄中，執(zhí)行 npm run watch，

$ npm run watch

> debug-webpack@1.0.0 watch ~/Test/debug-webpack
> webpack --watch


webpack is watching the files…

Hash: 2e91628041d9a877f709
Version: webpack 4.20.2
Time: 347ms
Built at: 2018-10-25 10:50:27
   Asset       Size  Chunks             Chunk Names
index.js  937 bytes       0  [emitted]  index
Entrypoint index = index.js
[0] ./src/index.js 8 bytes {0} [built]

命令執(zhí)行完之后，并沒有退出，
它會監(jiān)控源碼文件，然后只對改變的文件進行重編譯。

1.3 修改源代碼

我們修改一下src/index.js文件，把內(nèi)容改成，

alert(1);

然后保存。
我們發(fā)現(xiàn)命令行中，在以上輸出內(nèi)容的尾部，又增加了如下信息，

Hash: 3d9c84dc401a1a18ea6b
Version: webpack 4.20.2
Time: 238ms
Built at: 2018-10-25 10:53:51
   Asset       Size  Chunks             Chunk Names
index.js  938 bytes       0  [emitted]  index
Entrypoint index = index.js
[0] ./src/index.js 9 bytes {0} [built]

其中Hash值發(fā)生了變化。

2. webpack watch流程

2.1 回顧compiler.run

在第三篇文章中，我們知道，
npm run build，調用了node_modules/.bin/webpack，它是一個軟鏈接，
原身在 node_modules/_webpack@4.20.2@webpack/bin/webpack.js。

然后 webpack/bin/webpack.js require了 webpack-cli/bin/cli.js，
webpack-cli中引用了webpack模塊，然后調用了compiler.run。

2.2 webpack-cli調用compiler.watch

與npm run build不同是，npm run watch會帶參數(shù) --watch 調用 node_modules/.bin/webpack，

$ node_modules/.bin/webpack --watch

這樣會影響 webpack-cli的代碼邏輯，
重新分析 webpack-cli/bin/cli.js ，我們發(fā)現(xiàn)在 第518行，判斷了是否處于watch模式，

if (firstOptions.watch || options.watch) {
    ...
    compiler.watch(watchOptions, compilerCallback);
    ...
} else compiler.run(compilerCallback);

如果處于watch模式，就調用compiler.watch。
通過寫log我們得到watchOptions的值為true。

2.3 如何debug

（1）新建debug.js

const webpack = require('webpack');
const options = require('./webpack.config');

const compiler = webpack(options);
compiler.watch(true, (...args) => { });

（2）作為node腳本執(zhí)行

$ node debug.js

結果命令行什么也沒輸出，也沒有返回，卡在了那里。

（3）修改源代碼
現(xiàn)在我們修改一下 src/index.js，然后保存，

alert(2);

（4）檢查編譯結果
打開 dist/index.js ，文件內(nèi)容如下，

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert(2)}]);

我們看到它已經(jīng)更新了。

（5）調試
這說明debug.js是有效的，我們復現(xiàn)了watch過程，
接下來我們就可以在compiler.watch位置打斷點，
跟蹤watch代碼邏輯了。

進行單步調試，流程跳轉到了 Compiler.js 第189行 的watch 方法中。

2.4 watch循環(huán)

（1）Watching類

查看Compiler.js 第189行，watch是Compiler類的一個實例方法，

watch(watchOptions, handler) {
    ...
    return new Watching(this, watchOptions, handler);
}

其中Watching 是在 webpack/bin/Watching.js 中實現(xiàn)的。

（2）compiler.readRecords

Watching構造函數(shù)調用了this.compiler.readRecords，

class Watching {
    constructor(compiler, watchOptions, handler) {
        ...
        this.compiler.readRecords(err => {
            ...
            this._go();
        });
    }
}

readRecords位于Compiler.js 第393行，

readRecords(callback) {
    if (!this.recordsInputPath) {
        ...
        return callback();
    }
    ...
}

它判斷了，compiler.recordsInputPath這個屬性，
在我們的例子中，它為undefined，于是直接調用callback返回了。

this.compiler.readRecords返回后，會調用this._go(); 。

（3）watching._go
this._go是Watching類的實例方法，位于Watching.js 第36行，

_go() {
    ...
    this.compiler.hooks.watchRun.callAsync(this.compiler, err => {
        ...
        this.compiler.compile(onCompiled);
    });
}

它會先調用compiler.hooks.watchRun，然后再調用compiler.compile方法。
compiler.compile方法我們已經(jīng)很熟悉了，它會先make然后在seal。

（4）onCompiled
onCompiled是compiler.compile做完之后的回調，它會處理把文件內(nèi)容實際寫到文件中的邏輯。

const onCompiled = (err, compilation) => {
    ...
    this.compiler.emitAssets(compilation, err => {
        ...
        this.compiler.emitRecords(err => {
            ...
            return this._done(null, compilation);
        });
    });
};

最終調用了this._done，它是Watching類的實例方法，位于Watching.js 第88行。

_done(err, compilation) {
    ...
    this.compiler.hooks.done.callAsync(stats, () => {
        ...
        if (!this.closed) {
            this.watch(
                ...
            );
        }
        ...
    });
}

this._done里面會觸發(fā)compiler.hooks.done，表示編譯完成了，
然后調用this.watch開始監(jiān)控文件的變更。

（5）循環(huán)

this.watch是Watching類的一個方法，位于Watching.js 第113行，

watch(files, dirs, missing) {
    ...
    this.watcher = this.compiler.watchFileSystem.watch(
        ...
        (
            ...
        ) => {
            ...
            this._invalidate();
        },
        (fileName, changeTime) => {
            this.compiler.hooks.invalid.call(fileName, changeTime);
        }
    );
}

在文件發(fā)生變化時，會調用它的最后一個回調，從而觸發(fā)compiler.hooks.invalid這個hooks。
我們可以拿到發(fā)生變更的文件名fileName，和變更時間changeTime。

我們在這里打個斷點，然后修改一下src/index.js再保存，會發(fā)現(xiàn)程序會跳轉到這里，
fileName的值為，

~/Test/debug-webpack/src/index.js

changeTime的值是一個時間戳，

1540440595000

這個hooks執(zhí)行完之后，程序會跳轉到this.compiler.watchFileSystem.watch的第一個回調中，
調用this._invalidate(); ，然后在_invalidate中又調用了this._go(); 對源碼進行重編譯再寫入到文件中，
最后回到this._done，調用this.watch重新監(jiān)控。

_invalidate方法，位于 Watching.js 第155行，

_invalidate() {
    ...
    if (...) {
        ...
    } else {
        this._go();
    }
}

3. watch原理

3.1 NodeEnvironmentPlugin

那么webpack到底是怎樣監(jiān)控文件變更的呢？

在Watching.js 第115行，Watching類的watch方法中調用了，this.compiler.watchFileSystem.watch，

watch(files, dirs, missing) {
    ...
    this.watcher = this.compiler.watchFileSystem.watch(
        ...
        (
           ...
        ) => {
            ...
            this._invalidate();
        },
        (fileName, changeTime) => {
            this.compiler.hooks.invalid.call(fileName, changeTime);
        }
    );
}

然而我們在Compiler.js中卻找不到watchFileSystem的定義。
通過全文搜索，我們發(fā)現(xiàn)watchFileSystem屬性，是由lib/node/NodeEnvironmentPlugin.js 添加上去的。

class NodeEnvironmentPlugin {
    apply(compiler) {
        ...
        compiler.watchFileSystem = new NodeWatchFileSystem(
            compiler.inputFileSystem
        );
        ...
    }
}

而NodeWatchFileSystem 則是由 lib/node/NodeWatchFileSystem.js實現(xiàn)的，它的watch方法如下，

watch(files, dirs, missing, startTime, options, callback, callbackUndelayed) {
    ...
    this.watcher = new Watchpack(options);

    if (callbackUndelayed) {
        this.watcher.once("change", callbackUndelayed);
    }

    this.watcher.once("aggregated", (changes, removals) => {
        ...
        callback(
            ...
        );
    });

    this.watcher.watch(files.concat(missing), dirs.concat(missing), startTime);
    ...
}

它實例化了一個WatchPack對象，然后為watcher注冊了兩個事件監(jiān)聽器，
當change事件發(fā)生時，會觸發(fā)最后一個回調callbackUndelayed，
aggregated事件發(fā)生時會觸發(fā)第一個回調callback。

3.2 WatchPack

其中WatchPack來自一個獨立的代碼庫，它是由模塊watchpack（v1.6.0）導出的，
它可以用來監(jiān)控文件和目錄的變更。

（1）watchPack.watch
我們來看一下WatchPack的watch方法，

Watchpack.prototype.watch = function watch(files, directories, startTime) {
    ...
    this.fileWatchers = files.map(function(file) {
        return this._fileWatcher(file, watcherManager.watchFile(file, this.watcherOptions, startTime));
    }, this);
    this.dirWatchers = directories.map(function(dir) {
        return this._dirWatcher(dir, watcherManager.watchDirectory(dir, this.watcherOptions, startTime));
    }, this);
    ...
};

它調用了_fileWatcher或_dirWatcher方法，第一個參數(shù)是file或dir，
第二個參數(shù)是一個watcher對象，根據(jù)_fileWatcher或_dirWatcher方法的形參我們可以確定這一點，

Watchpack.prototype._fileWatcher = function _fileWatcher(file, watcher) {
    watcher.on("change", function(mtime, type) {
        ...
    }.bind(this));
    watcher.on("remove", function(type) {
        ...
    }.bind(this));
    return watcher;
};

Watchpack.prototype._dirWatcher = function _dirWatcher(item, watcher) {
    watcher.on("change", function(file, mtime, type) {
        ...
    }.bind(this));
    return watcher;
};

它們只是調用了第二個參數(shù)watcher，為之注冊了change和remove事件而已。
因此，我們要重點考慮下watcher是怎么來的，
查看watch方法，我們知道，watcher是由watcherManager.watchFile或watchDirectory創(chuàng)建的，

watcherManager.watchFile(file, this.watcherOptions, startTime)
watcherManager.watchDirectory(dir, this.watcherOptions, startTime)

（2）watcherManager.watchDirectory
watcherManager.watchFile和watcherManager.watchDirectory，
定義在watchpack/lib/watchManager.js中，

WatcherManager.prototype.watchFile = function watchFile(p, options, startTime) {
    ...
    return this.getDirectoryWatcher(directory, options).watch(p, startTime);
};

WatcherManager.prototype.watchDirectory = function watchDirectory(directory, options, startTime) {
    return this.getDirectoryWatcher(directory, options).watch(directory, startTime);
};

它們都調用了getDirectoryWatcher。
而 getDirectoryWatcher中則創(chuàng)建了一個DirectoryWatcher對象執(zhí)行watch操作。
位于 watchpack/lib/watchManager.js 第18行，

WatcherManager.prototype.getDirectoryWatcher = function(directory, options) {
    ... 
    if(...) {
        this.directoryWatchers[key] = new DirectoryWatcher(directory, options);
        ...
    }
    ...
};

（3）DirectoryWatcher
DirectoryWatcher也是watchpack創(chuàng)建的對象，定義在 watchpack/lib/DirectoryWatcher.js中，

function DirectoryWatcher(directoryPath, options) {
    ...
    this.watcher = chokidar.watch(directoryPath, {
        ...
    });
    ...
}

它調用了chokidar（v2.0.4）模塊得到了一個watcher。
chokidar，封裝了Node.js內(nèi)置的fs.watch方法，位于chokidar/lib/nodefs-handler.js 第37行，

return fs.watch(path, options, handleEvent);

fs.watch的文檔可以參考這里，Class: fs.FSWatcher。
總之，watchpack調用了chokidar，chokidar調用了fs.watch完成了watch操作。

參考

webpack-cli v3.1.2 lib/cli.js
webpack v4.20.2 bin/Watching.js
watchpack v1.6.0
chokidar v2.0.4