项目地址

前言

前端开发使用过webpack的朋友肯定知道它的热刷新功能，超喜欢它的热刷新有木有。还记得当初用的还是grunt、gulp。有个保存下就帮忙硬刷页面就觉得开心死了啊。后面用了webpack简直发现自己太单纯，年少无知。

image.png

既然用了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等热门库和一些不知名的库。
学海无涯，仍需努力！！！