进入 webpack.js
// 传入地址,new Compiler 出来一个复杂对象
compiler = new Compiler(options.context);
// 把 options 挂载到对象上
compiler.options = options;
new NodeEnvironmentPlugin().apply(compiler);
compiler 太复杂我们先看 NodeEnvironmentPlugin
const NodeWatchFileSystem = require(“./NodeWatchFileSystem”);
const NodeOutputFileSystem = require(“./NodeOutputFileSystem”);
const NodeJsInputFileSystem = require(“enhanced-resolve/lib/NodeJsInputFileSystem”);
const CachedInputFileSystem = require(“enhanced-resolve/lib/CachedInputFileSystem”);
class NodeEnvironmentPlugin {
apply(compiler) {
// 可以缓存输入的文件系统
compiler.inputFileSystem = new CachedInputFileSystem(
new NodeJsInputFileSystem(),
60000
);
// 输入文件系统
const inputFileSystem = compiler.inputFileSystem;
// 输出文件系统，挂载到 compiler 对象
compiler.outputFileSystem = new NodeOutputFileSystem();
// 传入输入文件，监视文件系统，挂载到 compiler 对象
compiler.watchFileSystem = new NodeWatchFileSystem(
compiler.inputFileSystem
);
// 添加事件流 before-run
compiler.hooks.beforeRun.tap(“NodeEnvironmentPlugin”, compiler => {
if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
});
}
}
module.exports = NodeEnvironmentPlugin;
打开插件 NodeJsInputFileSystem.js
“use strict”;
const fs = require(“graceful-fs”);
class NodeJsInputFileSystem {
// 读取目录下文件
readdir(path, callback) {
fs.readdir(path, (err, files) => {
callback(err, files && files.map(file => {
// 对文件名进行 NFC 格式化
return file.normalize ? file.normalize(“NFC”) : file;
}));
});
}
// 异步读取目录下文件
readdirSync(path) {
const files = fs.readdirSync(path);
return files && files.map(file => {
return file.normalize ? file.normalize(“NFC”) : file;
});
}
}
const fsMethods = [
“stat”,
“statSync”,
“readFile”,
“readFileSync”,
“readlink”,
“readlinkSync”
];
// 同步 fs 方法
for(const key of fsMethods) {
Object.defineProperty(NodeJsInputFileSystem.prototype, key, {
configurable: true,
writable: true,
value: fs[key].bind(fs)
});
}
module.exports = NodeJsInputFileSystem;
graceful-fs 就是对 node 原生 fs 做了一层封装，显得更优雅
总体看来 NodeEnvironmentPlugin 这个模块就是对文件做了处理，又重新封装了 node.js 对 fs 模块做了以一些处理，文件的输入，输出，缓存，监听 …