【问题解决】webpack 打包 - 用上 contenthash，每次打包后，全部文件的 hashname 依然会变动

问题描述：

1. 项目中有 前端目录，前端目录下有多个入口（每一个入口进行单独的打包），经过 webpack splitchunk 插件，每次打包时，都会把全部入口的 react 库独立抽离出来，抽离后的文件命名为 chunkname.contenthash.js；

2. 打包后发现，每一个入口抽离出来的 react chunk 都不同，有多少个入口，最终打包 就有 多少个 react chunk文件，每一个文件的 hash 名字都不同；

   理论上，因为单独抽离的只有 react，不管有多少个入口，打包出来的 react chunk 内容应该都是同样的，但实际状况倒是有多个 react chunk，这种状况明显不利于客户端的缓存持久化；

问题分析：

1. 把 uglifyjs 插件去除，从新打包，看看每一个 react chunk 有什么不同

如上图所示，不一样的文件，对应位置的数字都不同，致使文件内容都不一致

2. 了解 webpack 的原理的话，能够知道，上图所示的两个数字分别是 chunkId 和 moduleId

3. 至此，问题基本清楚了，因为 多个入口 是分别打包的，而 react chunk 分配到的 moduleId 和 chunkId 都是随机生成的，因此不一样入口的 react chunk 的 moduleId 和 chunkId 都不同；同理同一入口屡次打包，它的 react chunk 分配到的 moduleId 和 chunkId 也会有可能不同；

问题解决：

1. 目的是要固化 chunkId 和 moduleId 的分配，有两种解决路径：a、能够本身写插件和自定义方案进行 id 的分配；b、webpack 官方已经提供了相关插件进行处理；

2. 了解过 webpack 的官方解决方案后，决定直接使用官方方案（咱们本身写插件的话，方案也和官方的方案同样）；

官方文档可参考：webpack.js.org/configurati…

3. 修改 webpack 配置

   a. chunkId 配置为 由包含模块定义的名字，与 splitChunk 共同工做，能够固化 chunkId；

   b. moduleId 配置为 对应模块的完整路径 的 hash 值，避免 每次打包时 moduleId 随机分配数字；

4. 检验成果，从新打包

   以下图，react chunk 收敛到只有一个，不一样入口均可以服用该 chunk，解决持久缓存的问题