谈谈你对 Webpack 中 hash 的了解?

Question

谈谈你对 Webpack 中 hash 的了解?

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

webpack 中存在的三种 hash：

• hash（全局）

  • 打包后的所有文件的 hash 是完全相同的
  • 修改一个文件并重新打包，会导致所有输出文件的 hash 值都跟着变化

• chunkhash（分组）

  • 打包后文件的 hash 值会根据入口文件的不同而不同
  • 当某个入口文件修改并重新打包后，会导致该入口文件关联的所有文件的 hash 值都发生修改，但是不会影响到其他入口文件的 hash 值

• contenthash（内容）

  • 打包后每个文件的 hash 值都不同，因为每个文件的 hash 值都是根据自身的内容去生成的
  • 当某个文件内容修改并打包后，只会修改其本身的 hash 值，不会影响其他文件的 hash 值

配置示例:

output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'js/[name].[hash].js', // 配置全局 hash
  filename: 'js/[name].[chunkhash].js', // 配置分组 hash
  filename: 'js/[name].[contenthash].js', // 配置内容 hash
  clean: true
},

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。