SSR打包使客户端打包的文件名每次不一样且能够被服务端引用

在使用react开发过程中为了SEO等要进行SSR，那么就要进行客户端和服务端分开打包，且客户端的入口文件打包后（index.js）要在服务端的静态模版里被引用，如下：

  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插件进行配置静态模版引入文件，即使文件名进行hash也没问题，因为他是根据打包入口文件进行引入打包后的文件；在SSR的时候，需要分开打包，那么这种方式就不再起作用，我们就需要进行另外想办法咯。

因为如果每次客户端代码打包后的文件名会发生变更，所以在服务端的代码引入这个文件的时候也会发生改变，服务端也就需要每次都进行再次打包，既然两端都要进行打包，那么都需要运行打包命令，那么我们就找到了一个解决办法：node命令是可以在代码里通过process.env.HASH获取到HASH参数的，那么我们在打包时可以先配置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\""
  }

⚠️：这里注意要执行以上组合命令需要如下操作，
npm install npm-run-all -g 安装npm-run-all
npm install nodemon -g 安装nodemon

这样就可以在打包的时候直接运行命令 HASH=20190710_01 yarn dev or HASH=20190710_01 npm run dev传参，在客户端打包文件(webpack.client.js)里接收参数，如下：

  output: {
    filename: "index_"+process.env.HASH+".js",  // 接收参数
    path: path.resolve(__dirname, "public")
  },

服务端代码(webpack.server.js)，如下：

import clientConfig from '../../webpack.client.js'
...
... 
 return `
            <html>
                <head>
                    <title>Home</title>
                </head>
                <body>
...
                    <!--直接调用客户端打包输出文件名-->
                    <script src="/${clientConfig.output.filename}"></script>  
                </body>
            </html>
    `

以上，就解决了客户端打包文件名变更，且服务端正确引用的问题；

PS：其他同学若有更好方式，尽可以在浏览评论中提出供大家参考，Thx！

SSR打包使客户端打包的文件名每次不一样且能够被服务端引用

推荐阅读更多精彩内容