webapck5 缓存

缓存作用：让打包的构建速度更快
语法：

module.exports = {
   cache:{ // 全体缓存
        type: 'filesystem',//必设置项
        cacheDirectory: path.resolve(__dirname, '.temp_cache'), //将缓存存在 .temp_cache中    }
}

问题：浏览器总是获取上一次缓存，不能获取新的缓存。

文件资源缓存：

        new miniCssExtractPlugin({
            filename:'css/build.[hash:10].css'//在文件上加入hash值，此值由webpack生成，取前10位
        })

	解决：浏览器获取当前最新缓存
	问题：  hash：每次webpack构建时会生成一个唯一的hash值，
	 因为js和css同时使用一个hash值，   如果重新打包，会导致
	 所有缓存失效。（可能只改动一个文件）

chunkhash缓存：

       new miniCssExtractPlugin({
            filename:'css/build.[chunkhash:10].css'
        })

        chunkhash:  
        根据chunk生成的hash值。如果打包来源于同一个chunk
        ，那么hash值就一样  ，因为css是在js中被引入的，所以
        同属于一个chunk，所以两者同样拥有相同的hash，所以
        会导致和文件资源缓存一样的问题。


        contenthash缓存：

      new miniCssExtractPlugin({
            filename:'css/build.[contenthash:10].css'
        })

               contenthash: 根据文件的内容生成hash值。
               不同文件hash值一定不一样。
               解决：让浏览器读取到未修改文件的缓存