从零搭建一个基于Vue前后分离的SSR应用

ssr

koa 生态库改造

为了配合 koa 实现 vuessr，我对一些相关库进行了 fork 后的改造：

https://github.com/webjohnjiang/koa2-webpack4-dev-middleware

https://github.com/webjohnjiang/koa-webpack-hot-middleware

https://github.com/webjohnjiang/express-to-koa

热加载

热加载这一块，在没有 SSR 的时候，我们最简便的方式是使用 webpack-dev-server 这个工具直接启动一个调试 server，它内置了 webpack-dev-middleware 和 webpack-hot-middleware 实现基于内存的 webpack 资源托管和 HMR(模块热加载)。

webpack-dev-server 原理:

  1. 通过一个 express 或 koa server 来提供静态资源托管
  2. 通过 webpack-dev-middleware 中间件来接管 webpack compiler 的 output 输出，从输出到磁盘改为输出到内存.
  3. 通过 webpack-hot-middleware 设置 webpack compiler 的 watch 文件改动并重新编译，然后监听 compiler 的编译完成事件，在编译完成后通过 websocket 通知到当前连接到的浏览器。

HMR 模块热更新其实是 webpack 所支持的一个能力，有了这个能力之后，才会出现 webpack-client-hot 来配合完成客户端的热替换。

webpack 内部 HMR 实现原理:

webpackjs.org/concepts/hot-module-replacement

webpack-dev-middleware 功能：

  1. 把 webpack 编译从磁盘改为内存文件系统
  2. 在 webpack watch 到文件改动进行编译时，webpack-dev-middleware 会延迟请求的响应直到编译完成。

关于热替换：
热替换这里有两个中间件可以用，webpack-hot-middleware 和 webpack-hot-client
他们的区别是：https://github.com/webpack-contrib/webpack-hot-client/issues/18

总之，hot-client 用的是 websocket，面向最新的浏览器。而且他不是 express 风格的中间件，所以可以允许你随意使用。

webpack 的 publicPath：

这个配置在生产环境是非常有用的，因为我们的资源无论在开发环境是怎么个放置的。而在生产环境，通常是部署到 cdn 的，可能是 cdn.xxx.com/myapp/xxx

因此，我们的 bundle 外网访问地址相当于变成了 cdn.xxx.com/myapp/static/js/bundle.js

因此 publicPath 需要配置好，从而让我们的 HTMLwebpackTempalte 插件以及其他插件可以正确更改我们的注入脚本的路径。
https://segmentfault.com/q/1010000007434045