babel缓存

第二次构建时会读取缓存，加快构建速度。
babel把编译后的文件进行缓存，当其他文件变化时不用再重新构建。
-->让第二次打包构建速度更快

文件资源缓存

维护hash值变换，控制资源更新。
-->让代码上线运行缓存更好使用，上线代码性能优化。
hash:每次webpack 构建时会生成唯一的hash值。每次构建生成的hash值不一样。
问题：js和css文件使用同一个hash值，如果重新打包会导致所有缓存失效。（可能我却只改动了一个文件）
chunkhash:根据chunk生成的hash值，如果打包来源于同一个chunk，（chunk：所有根据入口文件引入的东西都会生产成一个chunk）那么hash值一样。
问题：js和css的hash值还是一样的。
原因是css是在js中被引入的，所以同属于一个chunk
contenthash:会根据文件的内容生成hash值，不同的文件内容hash值不一样。
js文件
样式文件
HTML文件

  /* 缓存：
    babel缓存：
        cacheDirectory:true
        -->让第二次打包构建速度更快
    文件资源缓存：
        hash:每次webpack构建时会生成一个唯一的hash值
        问题：因为js和css使用同一个hash值，如果重新打包会导致所有的缓存失效（可能我只改动了一个文件）
        chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,name hash值就一样。
        问题：可能js和css还是一样的，因为css在js中被引入的，同属于一个chunk。（所以根据入口文件引入的文件都会生成一个chunk)
        contenthash:根据文件内容生成hash值，不同文件不一样
        -->让代码上线运行缓存更好使用
     */

image.png

image.png

image.png