webpack中hash、chunkhash、contenthash

文件指纹是指打包后输出的文件名和后缀。

hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。

指纹占位符

占位符名称	含义
ext	资源后缀名
name	文件名称
path	文件的相对路径
folder	文件所在的文件夹
hash	每次webpack构建时生成一个唯一的hash值
chunkhash	根据chunk生成hash值，来源于同一个chunk，则hash值就一样
contenthash	根据内容生成hash值，文件内容相同hash值就相同

hash

Hash 是整个项目的hash值，其根据每次编译内容计算得到，每次编译之后都会生成新的hash,即修改任何文件都会导致所有文件的hash发生改变。

module.exports = {entry: {main: './src/index.js',vender: ['lodash']},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[hash].js'},plugins: [new MiniCssExtractPlugin({filename: "css/[name].[hash].css"})]
};

chunkhash

chunkhash 采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。

chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

module.exports = {entry: {main: './src/index.js',vender: ['lodash']},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},plugins: [new MiniCssExtractPlugin({filename: "css/[name].[chunkhash].css"})]
};

contenthash

使用chunkhash存在一个问题，就是当在一个JS文件中引入CSS文件，编译后它们的hash是相同的，而且只要js文件发生改变，关联的css文件hash也会改变,这个时候可以使用mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。

module.exports = {entry: {main: './src/index.js',vender: ['lodash']},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},plugins: [new MiniCssExtractPlugin({filename: "css/[name].[contenthash].css"})]
};

webpack中hash、chunkhash、contenthash相关推荐

webpack中hash、chunkHash、contentHash的区别
webpack中hash.chunkHash.contentHash的区别文件目录: index.js依赖common.js和base.less hash Hash:和整个项⽬的构建相关,只要项⽬⽂ ...
webpack 中的 watch cache （下）
整个 watch 的过程通过事件的机制,完成几个抽象对象的逻辑串联,当触发 Watching.prototype.watch 的调用回调函数时,流程便进入到了另外一端,开始进行重新编译,相较于第一次编 ...
Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
webpack --- [读书笔记] webpack中常用的一些配置项
1. Webpack 当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
webpack中如何使用vue
1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...
Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同最直观 ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...

webpack中hash、chunkhash、contenthash

webpack中hash、chunkhash、contenthash相关推荐

最新文章

热门文章