Awesome
1.lazy下请求到来的时候要rebuild
在lazy阶段我们不是调用compiler.watch方法，而是等待请求到来的时候我们才会编译。
startWatch: function() {
var options = context.options;
var compiler = context.compiler;
// start watching
if(!options.lazy) {
var watching = compiler.watch(options.watchOptions, share.handleCompilerCallback);
context.watching = watching;
//context.watching得到原样返回的Watching对象
} else {
//如果是lazy，表示我们不是watching监听，而是请求的时候才编译
context.state = true;
}
}
调用rebuild的时候会判断context.state。每次重新编译后在compiler.done中会将context.state重置为true!
rebuild: function rebuild() {
//如果没有通过compiler.done产生过Stats对象，那么我们设置forceRebuild为true
//如果已经有Stats表明以前build过，那么我们调用run方法
if(context.state) {
context.state = false;
context.compiler.run(share.handleCompilerCallback);
} else {
context.forceRebuild = true;
}
},
下面是当请求到来的时候我们继续编译。
handleRequest: function(filename, processRequest, req) {
// in lazy mode, rebuild on bundle request
if(context.options.lazy && (!context.options.filename || context.options.filename.test(filename)))
share.rebuild();
//如果filename里面有hash，那么我们通过fs从内存中读取文件名，同时回调就是直接发送消息到客户端!!!
if(HASH_REGEXP.test(filename)) {
try {
if(context.fs.statSync(filename).isFile()) {
processRequest();
return;
}
} catch(e) {
}
}
share.ready(processRequest, req);
//回调函数将文件结果发送到客户端
},
其中processRequest就是直接把资源发送到客户端:
function processRequest() {
try {
var stat = context.fs.statSync(filename);
//获取文件名
if(!stat.isFile()) {
if(stat.isDirectory()) {
filename = pathJoin(filename, context.options.index || "index.html");
//文件名
stat = context.fs.statSync(filename);
if(!stat.isFile()) throw "next";
} else {
throw "next";
}
}
} catch(e) {
return goNext();
}
// server content
// 直接访问的是文件那么读取，如果是文件夹那么要访问文件夹
var content = context.fs.readFileSync(filename);
content = shared.handleRangeHeaders(content, req, res);
res.setHeader("Access-Control-Allow-Origin", "*"); // To support XHR, etc.
res.setHeader("Content-Type", mime.lookup(filename) + "; charset=UTF-8");
res.setHeader("Content-Length", content.length);
if(context.options.headers) {
for(var name in context.options.headers) {
res.setHeader(name, context.options.headers[name]);
}
}
// Express automatically sets the statusCode to 200, but not all servers do (Koa).
res.statusCode = res.statusCode || 200;
if(res.send) res.send(content);
else res.end(content);
}
}
所以，在lazy模式下如果我们没有指定文件名filename，那么我们每次都是会重新rebuild的！但是如果指定了文件名，那么只有访问该文件名的时候才会rebuild!
2.如果资源无效我们调用compiler.watch方法返回的Watching对象的invalidate方法
//invalidate传入一个回调函数，如果是watching模式，那么调用compiler.watch方法返回的Watching
//对象的invalidate方法来完成
invalidate: function(callback) {
callback = callback || function() {};
if(context.watching) {
share.ready(callback, {});
context.watching.invalidate();
} else {
callback();
}
}
3.调用compiler.watch方法返回的Watching对象的close方法来完成不在监听文件变化
//其实是调用webpack的compiler.watch方法返回的Watching对象的close方法完成
close: function(callback) {
callback = callback || function() {};
if(context.watching) context.watching.close(callback);
else callback();
}
4.该插件的compiler.outputFileSystem是一个MemoryFileSystem实例
webpackDevMiddleware.fileSystem = context.fs;
setFs: function(compiler) {
//compiler.outputPath必须提供一个绝对路径,其就是我们在output.path中配置的内容
if(typeof compiler.outputPath === "string" && !pathIsAbsolute.posix(compiler.outputPath) && !pathIsAbsolute.win32(compiler.outputPath)) {
throw new Error("`output.path` needs to be an absolute path or `/`.");
}
// store our files in memory
var fs;
var isMemoryFs = !compiler.compilers && compiler.outputFileSystem instanceof MemoryFileSystem;
//是否是MemoryFileSystem实例
if(isMemoryFs) {
fs = compiler.outputFileSystem;
} else {
fs = compiler.outputFileSystem = new MemoryFileSystem();
}
context.fs = fs;
//更新compiler.outputFileSystem
}
5.如果是lazy模式下我们要通过publicPath,output.Path来获取到文件并发送
function webpackDevMiddleware(req, res, next) {
function goNext() {
if(!context.options.serverSideRender) return next();
//如果不是serverSideRender直接放过
shared.ready(function() {
res.locals.webpackStats = context.webpackStats;
//res.locals.webpackStats存放了我们的compiler.done钩子函数返回的Stats对象
next();
}, req);
}
//如果不是get方法直接调用goNext
if(req.method !== "GET") {
return goNext();
}
var filename = getFilenameFromUrl(context.options.publicPath, context.compiler.outputPath, req.url);
//第一个是publicPath,第二个表示输出路径，第三个表示URL
if(filename === false) return goNext();
shared.handleRequest(filename, processRequest, req);
//传入文件名,这个文件名是绝对路径。回调函数和request对象，用于处理lazy模式，在我们访问的时候才会编译!!!
function processRequest() {
try {
var stat = context.fs.statSync(filename);
//获取文件名
if(!stat.isFile()) {
if(stat.isDirectory()) {
filename = pathJoin(filename, context.options.index || "index.html");
//文件名
stat = context.fs.statSync(filename);
if(!stat.isFile()) throw "next";
} else {
throw "next";
}
}
} catch(e) {
return goNext();
}
// server content
// 直接访问的是文件那么读取，如果是文件夹那么要访问文件夹
var content = context.fs.readFileSync(filename);
content = shared.handleRangeHeaders(content, req, res);
res.setHeader("Access-Control-Allow-Origin", "*"); // To support XHR, etc.
res.setHeader("Content-Type", mime.lookup(filename) + "; charset=UTF-8");
res.setHeader("Content-Length", content.length);
if(context.options.headers) {
for(var name in context.options.headers) {
res.setHeader(name, context.options.headers[name]);
}
}
// Express automatically sets the statusCode to 200, but not all servers do (Koa).
res.statusCode = res.statusCode || 200;
if(res.send) res.send(content);
else res.end(content);
}
}
如果资源已经完成编译那么我们直接发送，否则将回调函数放在集合中，等待完成后我们调用回调。
handleRequest: function(filename, processRequest, req) {
// in lazy mode, rebuild on bundle request
if(context.options.lazy && (!context.options.filename || context.options.filename.test(filename)))
share.rebuild();
//如果filename里面有hash，那么我们通过fs从内存中读取文件名，同时回调就是直接发送消息到客户端!!!
if(HASH_REGEXP.test(filename)) {
try {
if(context.fs.statSync(filename).isFile()) {
processRequest();
return;
}
} catch(e) {
}
}
share.ready(processRequest, req);
}
6.等待bundle编译完成后我们才会执行某一个回调
waitUntilValid: function(callback) {
callback = callback || function() {};
share.ready(callback, {});
}
7.webpack-dev-middleware也是通过compiler.watch来监听变化的，只是使用了MemoryFileSystem而已，进而提高了效率
startWatch: function() {
var options = context.options;
var compiler = context.compiler;
// start watching
if(!options.lazy) {
var watching = compiler.watch(options.watchOptions, share.handleCompilerCallback);
context.watching = watching;
//context.watching得到原样返回的Watching对象
} else {
//如果是lazy，表示我们不是watching监听，而是请求的时候才编译
context.state = true;
}
}