在使用react開發(fā)過程中為了SEO等要進(jìn)行SSR，那么就要進(jìn)行客戶端和服務(wù)端分開打包，且客戶端的入口文件打包后（index.js）要在服務(wù)端的靜態(tài)模版里被引用镐侯，如下：
const content = renderToString(
<StaticRouter location={req.path} context={context}>
{renderRoutes(routes)}
</StaticRouter>
);
return `
<html>
<head>
<title>Home</title>
</head>
<body>
<div id="root">${content}</div>
<script src="/index.js"></script>
</body>
</html>
`
在單純打包SPA客戶端代碼時咖刃，我們可以使用html-webpack-plugin插件進(jìn)行配置靜態(tài)模版引入文件，即使文件名進(jìn)行hash也沒問題估脆，因?yàn)樗歉鶕?jù)打包入口文件進(jìn)行引入打包后的文件；在SSR的時候座云，需要分開打包疙赠，那么這種方式就不再起作用，我們就需要進(jìn)行另外想辦法咯朦拖。
因?yàn)槿绻看慰蛻舳舜a打包后的文件名會發(fā)生變更圃阳，所以在服務(wù)端的代碼引入這個文件的時候也會發(fā)生改變，服務(wù)端也就需要每次都進(jìn)行再次打包璧帝，既然兩端都要進(jìn)行打包捍岳，那么都需要運(yùn)行打包命令，那么我們就找到了一個解決辦法：node命令是可以在代碼里通過process.env.HASH獲取到HASH參數(shù)的睬隶，那么我們在打包時可以先配置package.json
"scripts": {
"dev": "npm-run-all --parallel dev:**",
"dev:build": "webpack --config webpack.server.js --watch",
"dev:client": "webpack --config webpack.client.js --watch --$HASH",
"dev:start": "nodemon --watch build --exec node \"./build/bundle.js\""
}
??：這里注意要執(zhí)行以上組合命令需要如下操作锣夹，
npm install npm-run-all -g 安裝npm-run-all
npm install nodemon -g 安裝nodemon
這樣就可以在打包的時候直接運(yùn)行命令 HASH=20190710_01 yarn dev or HASH=20190710_01 npm run dev傳參，在客戶端打包文件(webpack.client.js)里接收參數(shù)苏潜，如下：
output: {
filename: "index_"+process.env.HASH+".js", // 接收參數(shù)
path: path.resolve(__dirname, "public")
},
服務(wù)端代碼(webpack.server.js)银萍，如下：
import clientConfig from '../../webpack.client.js'
...
...
return `
<html>
<head>
<title>Home</title>
</head>
<body>
...
<!--直接調(diào)用客戶端打包輸出文件名-->
<script src="/${clientConfig.output.filename}"></script>
</body>
</html>
`
以上，就解決了客戶端打包文件名變更恤左，且服務(wù)端正確引用的問題贴唇；
PS：其他同學(xué)若有更好方式，盡可以在瀏覽評論中提出供大家參考飞袋，Thx戳气！
