webpack配置中的3种hash值

简介: webpack配置中的3种hash值

在Webpack配置中,常见的三种hash值是:chunkhash、contenthash和hash。

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
},
// 其他配置项...

optimization: {
runtimeChunk: 'single',
moduleIds: 'hashed',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};

  1. chunkhash:chunkhash是根据每个chunk的内容计算的哈希值。一个chunk指的是Webpack打包过程中生成的文件块,可以是入口文件、异步加载的模块或者提取的公共模块。每个chunk都有一个唯一的chunkhash值,如果文件内容发生变化,其对应的chunkhash值也会改变。使用chunkhash可以有效地处理浏览器缓存问题,确保只有发生变化的文件会被重新下载。

  2. contenthash:contenthash是根据文件内容计算的哈希值。它与chunkhash类似,但是不同的是,contenthash是针对文件的内容进行计算,而不是整个chunk。这意味着如果同一个chunk中的某个文件内容发生变化,只有该文件的contenthash会改变,其他文件的contenthash保持不变。使用contenthash可以更精确地控制文件的缓存更新,适用于需要单独缓存文件的场景。

  3. hash:hash是整个项目的构建哈希值,它会影响所有文件的名称。当项目中的任何文件发生变化时,hash值都会发生变化。因此,使用hash作为文件名的一部分将导致所有文件都被重新下载,即使只有一个文件发生了变化。hash在某些情况下可能会破坏浏览器缓存策略,因此在生产环境中通常不建议使用。

这些hash值可以在Webpack的配置中使用,例如在输出文件名中使用[chunkhash][contenthash]占位符,或者在Webpack插件配置中作为选项的一部分。

请注意,这些hash值只在Webpack构建过程中有效,不同的构建会生成不同的hash值。因此,当使用Webpack进行多次构建时,确保了解每个hash值的含义和使用场景,以便正确地处理文件缓存和更新。

相关文章
|
5天前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
7天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
23 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
6天前
|
缓存 资源调度 JavaScript
万字总结webpack实战案例配置
该文章总结了Webpack在实际项目中的配置案例,包括如何配置多页面应用、使用高级插件、优化构建速度及减少输出文件大小等方面的实战经验。
|
22天前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
2月前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
37 0
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
3月前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
52 6
|
3月前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
43 1
|
4月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
54 3
|
3月前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
48 0
下一篇
无影云桌面