关于打包后的客户端js文件名是hash形式的问题，热更新问题等...

Question

课程学完了。有个地方不明白。

如果按照老师您讲的，服务端渲染的时候，直接再server的utils文件里写死一个html字符串，返回给前端这样的思路。那在打包好的客户端js的文件名固定的情况下还好用，可是如果客户端的webpack配置内，filename以hash的形式命名，那怎么解决html引用客户端js的问题呢？因为客户端js文件名是变动的。

我想过一种解决办法

• 用html-webpack-plugin生成一个html模板
• 同时将生成的js引用到生成的html中
• server端再读出来
• 将要返回的content内容插入到读取出来的html中，返回给给客户端。

不知道这种办法怎么样，或者老师有其他的解决方案吗？

还有一个，关于热更新的，热更新的实现是不是就和服务端的没关系了？直接配置客户端的webpack就好了？

最后一个：我看到有其他的react服务端渲染项目代码是有一个node服务负责服务端渲染，然后会再启动一个webpack-dev-server

那这样不是启动两个服务了吗？所以开发环境下会启动哪个服务？不太明白为什么要启动两个服务，以及这两个服务之间的真正关系是什么。

先谢谢老师了~

Answer 1

Dell 2018-10-26 01:09:50

1. 你的方法可以，但是为什么要用hash作为文件名字？这不是自己给自己找麻烦吗

2. 是，服务器端每次更新你必须要重启node server

3. 两个服务一个是前端服务器，一个是后端服务器，真正上线，不需要前端服务器，但是需要后端服务器。webpack-dev-server只是为了简化开发
   

• CarrC #1

  在webpack打包的时候可以在命令里面传递参数HASH替代hash，客户端通过拼接process.env.HASH，服务端直接去获取客户端的设置的filename字段作为模版html引入文件名，这样就通过每次打包的命令做到了每次打包后的文件名能带上唯一标识；具体如下：打包命令dev:webpack --webpack.client.js --$HASH;执行打包命令HASH=123456 yarn dev；在webpack.client.js里通过process.env.HASH获取这个123456即可；

• CarrC #2

  使用hash作为文件名倒不是说给自己找麻烦，其实在正常开发中，代码升级后打包文件名不变的情况下，如果用户浏览器的缓存未清除，会造成新代码短时间内无效的问题