Webpack学习系列(二)文件指纹

367 阅读1分钟

文件指纹

给文件设置hash值,每次打包构建的时候如果文件发生了改变,那么其对应的hash值改变,其余的文件不会改变。这样的话有利于浏览器使用旧的缓存文件。

对js文件会使用chunkhash,chunkhash是无法在热更新的时候使用,因此将webpack分成webpack.prod.js和webpack.dev.js 并修改命令


对css使用contenthash


CSS文件指纹配置和JS文件指纹配置:

1. npm i mini-css-extract-plugin -D

2.style-loader是把样式插入到style标签内 插入头部,而cssextractplugin是提取css并按需加载,二者是互斥的。因此想要用css文件指纹就必须删掉style-loader,最终配置如下





图片文件指纹配置:


测试结果: