在webpack 配置中缓存分为两种， 一种是 babel 缓存， 一种是文件资源缓存

babel 缓存

直接在 babel-loader 中加上 cacheDirectory: true

        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          cacheDirectory: true,
          options: {
            presets: ['@babel/preset-env']
          }
        }

作用 ： 让第二次打包构建速度更快

文件资源缓存 （重要）

文件资源缓存是，用户请求服务器数据，返回资源的文件过程中，服务器端可以设置用户访问缓存(通过时间)。用户获取到的资源文件如果和初次获取到的资源文件一样，则不会向服务器发起获取新的文件资源请求，而是直接读取缓存的资源文件。 一旦服务端文件与缓存的不一样，则客户端重新发起请求获取新的资源文件。

作用： 让代码上线运行缓存更好使用

文件资源缓存一般都是通过 hash 值进行维护。 在webpack中 打包后文件通常设置 hash值进行文件命名 。
webpack 的hash 值影响着 文件资源缓存

hash

hash 每次webpack 构建时都会生成一个唯一的 hash 值
问题： 因为 js 和 css 同时使用一个 hash 值。 如果重新打包，会导致所有的缓存失效。 （可能我只修改了一个文件）

chunkhash

chunkhash 是根据 chunk 生成的 hash 值。 如果打包来源于同一个chunk （打包来源于同一个文件）, 那么hash 值就一样，

问题： 在 js 文件中引入的 css 文件的 hash 值一样。 因为 css 是在 js 中被引入的， 所以属于一个 chunk

contenthash

contenthash 是根据文件的内容生成 hash 值。 不同文件的 hash 值 一定不一样。

面试常问 webpack 生成文件的 hash值的不同