vue ssr 深入踩坑 #32
Description
之前写过一篇初探踩坑，主要是生产环境的配置，今天我们主要讲的是koa+vue ssr 的hmr配置
开发环境
开发环境为：koa+vue+webpack+bootstrap-vue
这个时候，坑来了：目前看到的官方关于vue ssr的例子基本都是express+webpack-dev-middleware+webpack-hot-middleware的。而koa和express的中间件机制和参数不一样，所以如果想要拿来主义的话，是没有办法直接用的。由于这个原因，koa-webpack诞生了。koa-webpack集成了webpack-dev-middleware以及webpack-hot-middleware，并可以吐出koa的中间件。
koa-webpack
koa-webpack 集成了两个插件，那么就会又有新的问题：如果这两个插件任何之一出现问题，那么整个插件都不会运行，而且koa-webpack是由个人维护的插件。最终我用的是：koa-webpack 5.1.0 + webpack 4.17.2
webpack编译
由于vue-ssr会生成两个json文件，所以在做hmr的时候需要产出这两个json，这种时候必须要做好错误处理工作，否则的话连哪里编译错了都不知道，而错误处理主要就是判断回调参数的error:stats.errors.length，如果有的话，直接stats.errors.join('/r/n')输出吧！绝对没错的
dev模式promise的使用
由于webpack产出vue-ssr-*.json的过程是异步的，所以需要有一个简单的控制器，来控制所有编译完成：
// 改造自vue官方ssr-demo
let ready
const readyPromise = new Promise((resolve, reject) => { ready = resolve })
const update = () => {
if (bundle && clientManifest && template) {
ready()
cb(bundle, {
template,
clientManifest
})
}
}而在webpack编译过程中会给koa插入中间件，所以，koa的listen也必须要在webpack产出之后：
if (isDev) {
readyPromise.then(() => app.listen('8011'))
} else {
app.listen('8011')
}webpack-dev-middleware 产出
不知道为什么，在使用koa-webpack的时候，hmr总是无法读出静态资源文件。所以后来用了一个比较yd的办法，修改了一下devMiddleware的配置，设置为writeToDisk: true。直接把改动写入到磁盘中，这样能保证koa的静态资源中间件肯定可以读到资源，也就无需去底层排查webpack-dev-middleware的产出和webpack-hot-client的问题了。
大致问题都列出来了，如果读者在使用koa做vue-ssr hmr的时候遇到了问题，或者有更好的办法，可以直接在issue下面回复，毕竟作者对这块也涉猎尚浅。