完美解决服务端渲染引入CSS文件及其它非JS资源的问题

[BetaMee]

搞react server side rendering，有一万万买想到的大坑，就是CSS样式文件无法在服务器环境使用，因为初始加载服务端要通过react renderToString方法生成HTML发送到客户端，其中组件引入的CSS样式就会报错，无法识别。这个项目用的是CSS Module+CSS in JS(Material UI 用的是内联样式)，查了很多，最终加两个钩子解决问题。

启动脚本：index.js

require('babel-polyfill');
//加载样式钩子，补足服务端渲染无法识别CSS文件的情况
require('css-modules-require-hook')({
    extensions: ['.css'],
    generateScopedName: '[name]__[local]-[hash:base64:8]'
});
// Image required hook
//引入asset-require-hook，来识别图片资源，对小于8K的图片转换成base64字符串，大于8k的图片转换成路径引用。
require('asset-require-hook')({
    extensions: ['jpg', 'png', 'gif','webp'],
    limit: 10000
});
//处理字体
require('asset-require-hook')({
    extensions: ['ttf','woff','svg','eot','woff2'],
    limit: 10000
});

//启动服务端脚本
require('./server/server');

原理我的理解应该是：启动服务器脚本之前钩子进行劫持，不让服务端进行渲染，只生成类名，导入HTML中。（这里如果又理解错误可以再讨论）

还有一个asset-require-hook钩子是对图片和字体打包资源的一个劫持，跟CSS思路一致，这样的话整个同构应用就解决了热加载、CSS样式、状态调试等一系列问题，至于还有什么坑，等着做的过程中再去踩吧。