Vue 进阶(七十):了解 webpack 的 hash、chunkhash、contenthash
![Vue进阶(七十):了解 webpack 的 hash、chunkhash、contenthash](https://static001.geekbang.org/infoq/2f/2f98869c860a97cf2d8d5954ee974cdd.gif)
一、前言
hash
代表compilation
的hash
值。compilation
在项目任何一个文件改动后就会被重新创建,然后webpack
计算新的compilation
的hash
值。chunkhash
代表chunk
的hash
,模块发生改变才会重新生成hash
。contenthash
解决改变style
文件导致js
文件重新生成hash
的问题(使用extract-text-webpack-plugin
单独编译输出css
文件)。
二、vue-cli 举例
vue-cli
脚手架中webpack
配置文件 build/webpack.base.conf.js
vue-cli
中,hash
用于图片,音视频,和字体文件。
复制代码
chunkhash
主要用于js
文件中
复制代码
注:
chunkhash
只能用在生产环境不能用在开发环境。去掉热更新,不要让
webpack.HotModuleReplacementPlugin()
在plugins
里运行,热更新与js
的chunkhash
有冲突。
contenthash:build/webpack.prod.conf.js
使用extract-text-webpack-plugin
单独编译输出css
文件。extract-text-webpack-plugin
提供了另外一种hash
值:contenthash
复制代码
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/0e9aacec1deb12e46d7c96813】。文章转载请联系作者。
评论