webpack实现SSR

定义

- 在服务端进行HTML+CSS+JS+Data的渲染，生成并返回HTML
- 所有的模板，资源都在服务端，其获取数据速度更快。
- 可以减少白屏时间，一个请求返回HTML和数据，而不是客户端渲染那种串行加载资源
- SEO友好，客户端获取到的HTML文件已经是被渲染后的结构化文件，而不是空的HTML文件

实现

- 与客户端不同，服务端没有全局的window和document等对象，因此，在渲染组件时不可直接调用render方法，将其编译成html模板
- 应该使用框架提供的服务端方法，如react_DOM的renderToString方法，将组件渲染成字符串，然后插入到空的html模板中

问题

- 将组件在服务端打包时，由于服务端运行环境与浏览器不同，会确实浏览器端的部分变量（window，document等），因此我们需要手动hack。
- 组件中的许多插件，或者是导入导出方式都与浏览器不同，因此需要进行改写
- NodeJs在打包组件的时候无法解析CSS，可以采取ignore-loader来忽略CSS解析

优化构建

显示日志配置

- 配置webpack的stats，或者devserve的stats
- errors-only：发生错误时输出
- minimal：发生错误或有新的编译时输出
- none：没有输出
- normal：标准输出
- verbose：全部输出
- 插件friendly-errors-webpack-plugin，日志输出表现的更友好

异常中断处理

- CI/CD的pipline或者发布系统需要知道当前的构建状态
- 构建完成后可通过echo $? 来获取错误码
- 手动捕获异常，可借助webpack的complier对象
- complier会在编译完成后出发其属性hooks的done状态，通过监听该状态
- 设置其回调函数，我们可以回调函数的参数获取编译的状态
- 根据状态，使用process.exit来设置错误码
- 在外部，根据echo $? 获取错误码