使用 HashedModuleIdsPlugin 解决 hash 频繁变动的问题

[xiaosansiji]

Environment(required) | 环境（必填）

• roadhog version（roadhog版本）1.3.1
• Nodejs and Npm version（Nodejs 和 Npm 版本）v8.9.1 和 5.5.1
• Operating environment (e.g. OS name) and its version（操作系统版本）:Fedora 26

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

新版本 roadhog 中增加了 hash 选项来支持静态资源使用 hash 文件名后，我们废弃掉了在 roadhog 0.6.x版本 webpack.config.js 里重写 chunk 名称生成策略的方案。#69

但是我们发现这一套 hash 方案没有考虑 hash id 不稳定的问题，具体来说就是 webpack 模块 ID 默认是按照依赖顺序递增分配的，这会使得依赖了某个出现改动 chunk 的其他 chunk 内容也跟着变化，导致浏览器缓存失效。

链接：

• 用 webpack 实现持久化缓存

• Vendor chunkhash changes when app code changes #1315

基于这一需求，我们还是在项目中添加了 webpack.config.js 并在里面增加了 HashedModuleIdsPlugin 及
CommonsChunkPlugin 插件的配置：

new webpack.HashedModuleIdsPlugin({
    hashFunction: 'md5',
    hashDigest: 'hex',
    hashDigestLength: 8
 }),
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor', // 将 vendor 入口处的代码放入 vendor 模块
    minChunks: ({ resource }) => (
     resource &&
      resource.indexOf('node_modules') >= 0  //&& resource.match(/(\.js|\.css)$/)//组件里的抽不出来。所以写和不写一样的- -
    ),     
 }),
new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime', // 将 webpack 自身的运行时代码放在 runtime 模块
  }),

现在我们项目中 HashedModuleIdsPlugin 和
CommonsChunkPlugin 配合下打包出来的静态资源总量比较少，而且每次业务迭代的时候利用缓存的情况也比较理想。

What do you expected?（预期的正常效果）

咱们 roadhog 这边是否也有类似的需求，我可以提个PR？

[sorrycc]

感谢提醒，我在 roadhog@2 里处理。

[xiaosansiji]

@sorrycc 好的，会关注 2.x 的实现方式，这个 iuss 需要我关掉不？