场景:
当有100个js文件,当修改了其中某一个js文件的时候,不可能再把所有的js文件再编译一遍,会影响构建速度,所以这个时候只要实现修改一个js文件只构建那一个文件,其他的99个文件不动。
那么这个时候可能会想到用热模块替换(HMR),但是HMR是基于dev-server的,生产环境是不需要dev-server。
那么这个时候可以用缓存实现。怎么配置呢?
1、针对js兼容性进行缓存:(babel缓存)
babel-loader的options设置中增加cacheDirectory属性,属性值为true。表示:开启babel缓存,第二次构建时会读取之前的缓存,构建速度会更快一点。
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
2、针对文件资源进行缓存
(1)hash:每次webpack构建时都会生成一个唯一的hash值。(不管文件有没有修改,只要构建就重新生成hash值。)
比如:filename: 'built.[hash:10].js'
缺点:因为webpack构建js和css是共用一个hash值,如果重新打包会导致所有缓存失效。(只修改js文件,那么css文件也重新构建了)
(2)chunkhash:如果打包来自同一个chunk,那么hash值就一样。
问题:js和css的hash值还是一样的
因为css是在js中被引入的,所以还是同一个hash值,同属于一个chunk.
(3)contenthash:根据文件的内容生成hash值,不同文件的hash值都不一样
缓存作用:
babel缓存:让第二次打包构建速度更快
hash缓存:让代码上线运行缓存更好使用