我的回答

webpack的hash值分为3种

  • hash 是整个项目的hash值,其根据每次编译内容计算得到,每次编译之后都会生成新的hash, 即修改任何文件都会导致所有文件的hash发生改变
  • chunkhash
    • 采用hash计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即chunkhash
    • chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响
  • contenthash, 使用chunkhash存在一个问题,就是当在一个JS文件中引入CSS文件,编译后它们的hash是相同的,而且只要js文件发生改变 ,关联的css文件hash也会改变,这个时候可以使用mini-css-extract-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建

    参考回答

    1.Hash值

    webpack生态中存在多种计算hash的方式

  • hash

  • chunkhash
  • contenthash

hash代表每次webpack编译中生成的hash值,所有使用这种方式的文件hash都相同。每次构建都会使webpack计算新的hash。
chunkhash基于入口文件及其关联的chunk生成,某个文件的改动只会影响与它有关联的chunk的hash值,不会影响其他文件
contenthash根据文件内容创建。当文件内容发生变化时,contenthash发生变化

2.避免相同随机值

webpack在计算hash后分割chunk。产生相同随机值可能是因为这些文件属于同一个chunk,可以将某一个文件提到独立的chunk(如放入entry)