hash、chunkhash、contenthash

webpack中有3中hash 1.hash 主要用于开发环境中，当项目中的一个文件发生了改变，整个项目的hash就会发生改变。这样每次更新，文件都不会让浏览器缓存下来，保证页面每次都加载的是最新的资源 2.chunkhash 跟打包的chunk有关，具体来说就是根据入口entry配置文件来分析其依赖项，并由此来构建该entry的chunk，并生成对应的hash，不同的chunk会有不同的hash。 在生产环境中，我们会把第三方或者公共类库进行单独打包，所以不改动公共库的代码，该chunk的hash就不会发

　　对于webpack的hash，常用于cdn缓存。我理解的是文件不变的情况下，最后打包出来的hash串也不会变。最近被问到了这是三个hash的区别，就查了一下，发现还很有讲究。 　　先看一下三个hash的解释： 　　[hash] is a "unique hash generated for every build"[chunkhash] is "based on each chunks' content"[contenthash] is "generated for extracted conten

webpack 学习踩坑：模块热替换 与 [chunkhash]，有你没我，有我没你！

认识 SSL/TLSHTTPS 的内核是 HTTP。

浏览器在多次访问静态资源文件的时候，如果该文件已经在本地缓存，并且它的名称没有改变，那么浏览器会认为它没有被更新，便不会去请求服务器，而是使用该静态资源的缓存版本。如果某个文件被更改，我们希望浏览器应该重新请求它，而不是使用缓存版本，所以文件被修改后，它的名称也应该被改变。 在 webpack 中，最后生成的 chunk 文件都是由一个个的 module 编译后组合而成的，浏览器请求的 JS 文件实际上就是一个个的 chunk 。当我们修改某个 module 后，其所属 chunk 打包后的 JS 文件名称

结论：当规则为chunkhash时，打包后的hash值会根据入口文件的不用而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的hash值都修改，但是不会影响到其他入口文件的hash值。结论：当规则为contenthash时，每个文件的hash值都是根据自身内容而生成，当某个文件内容修改时，打包后只会修改其本身的hash值，不会影响其他文件的hash值。由于我们预设的是hash，所以我们直接运行打包npm run build，我们看看我们打包后的是什么东西。这里我就抽取精华部分。

path: path.resolve(__dirname, 'dist') console.log(__dirname); 打印出来是：/Users/wangrui/Desktop/wpDemos 意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去 运行脚本： ./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包 ...

网站响应速度是用户体验的第一要素，其重要性不言而喻。响应速度受很多因素影响，比如不同的业务场景，不同的用户终端，不同的技术栈。 为了获得更快的响应速度，一方面期望每次请求页面资源时，获得的都是最新的资源；另一方面期望在资源没有发生变化时，能够复用缓存以此来提高页面加载速度。 使用文件名+文件哈希值 的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。 而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段 先了解一下 webpack中hash、chunkhash、c.

spa-cli custom cli supply for vue or react branch master – base vue      – base + vue config react    – base + react config

webpack中的hash、chunkhash、contenthash区别 hash 如果采用hash打包的文件都会采用相同的hash值（未经特殊处理下），如果一个文件改动，打包后，其他未改动的文件的hash值也会跟着改变。 chunkhash 采用chunkhash的话，打包后每个文件都有自己hash值。改动文件重新打包，只有被改动的文件和与这个文件关联的文件（如改动test.js，index.js引入了test.js，那么两个文件hash都会改变）的hash值会改变。 contenthash

hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名 在 中使用 发送请求，中引入 资源 编译后，虽然我们自己定义的 css 文件名为 ，但是由于它被 引入了，所以打包出来的文件名变成了 。每一次编译后，生成的文件名都一样，这样会存在一个问题，通过 webpack 编译生成的静态文件会被我们放置到服务器中，当编译后的

什么是webpack ​ webpack是什么，官网中是这么说的。 ​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 ​ 从上面的概念中，我们可以看出webpack是一个会把应用程序中具有依赖关系的每个模块打包成一个或者多个bundle