前言
前端开发使用过webpack的朋友肯定知道它的热刷新功能，超喜欢它的热刷新有木有。还记得当初用的还是grunt、gulp。有个保存下就帮忙硬刷页面就觉得开心死了啊。后面用了webpack简直发现自己太单纯，年少无知。
既然用了koa2当然也想用这个功能，可惜很不幸的说照搬了下webpack-dev-middleware和webpack-hot-middleware并没有什么卵用。
怎么说呢？举个栗子，咱们类推下。使用过vue脚手架的朋友肯定知道它自带的webpack配置里有用webpack-dev-middleware和webpack-hot-middleware做热更新。npm run dev启动之后修改src下的文件会热刷新，修改build下的那肯定没什么卵用。同样的道理，类比下就知道了koa也没戏。
其实如果使用了koa-webpack-middleware会发现虽然修改了代码没生效，不过如果同时使用了eslint的话那还是可以检测出来的，所以代码肯定是重新编译了的，只是服务运行的还是旧代码。
所以我们是可以监测到代码有改动的，只是这里的关键是更新旧代码。所以我们要做的是把旧代码清掉，然后换成新代码。
<font color=red>百度了下发现早有人珠玉在前</font>，心好痛，不过没关系，至少自己有探索过呀。
文章地址
// 清理缓存方法
function cleanCache(modulePath) {
var module = require.cache[modulePath];
// remove reference in module.parent
if (module.parent) {
module.parent.children.splice(module.parent.children.indexOf(module), 1); //释放老模块的资源
}
require.cache[modulePath] = null; //缓存置空
}
那难道koa-webpack-middleware没用了么？那倒不是。网上现有例子都是采用<font color=red>fs.watch</font>监测代码修改，既然koa-webpack-middleware也可以检测到，那自然可以利用起来。
这里采用的是它的打印日志方法，旁门左道的利用了，O(∩_∩)O哈哈哈~
app.use(hotMiddleware(compiler, {
log: function () {
cleanCache(require.resolve('./data')); //清除该路径模块的缓存
try {
data = require('./data');
} catch (ex) {
console.error('module update failed');
}
}
}));
至此，修改.data.js发现服务器无需重启即可更新。
后记
其实发现很多东西网上都有人搞定了，而且乐于分享的还只是一部分，不过那又怎么样呢？还是自己探索来得好。毕竟看别人的大多过个眼熟，所以学习到一定程度看源码还是很有必要的。可惜目前只看了Backbone、artdialog、AndroidPN以及部分其他的例如jquery等热门库和一些不知名的库。
学海无涯，仍需努力！！！
