webpack- hash chunkhash contenthash

YorkChen 发布于2019-08-23 17:18 / 1151人阅读

摘要：但是，如果是，那么这种情况下，浏览器就不会去读取缓存，能保证这次请求一定是从服务器上读取的最新的文件。三是针对的每一个入口文件，独立的。如果里面的其中一个文件内容改变，只会改变这个入口文件之后的文件名，而不会影响到其他文件。

Webpack里面有三种hash，分别是：hash, chunkhash, contenthash.在我们尝试去区分他们仨之前，先来看看为什么我们需要hash。

一：为什么我们需要hash？

大家都知道我们的浏览器会缓存我们的文件。缓存是把双刃剑，好处是浏览器读取缓存的文件，能带来更佳的用户体验（不需要额外流量，速度更快）；坏处是有时候我们修改了文件内容，但是浏览器依然读取缓存的文件（也就是旧文件），导致用户看到的文件不是最新的。

怎么解决上述的问题呢？一般就是我们要主动告诉浏览器要不要读取缓存。举个例子，我们的index.html文件里面引用了一个index.js文件，用户每次请求index.js会按照浏览器的缓存机制去决定要不要读取缓存。但是，如果是index.js?v=1，那么这种情况下，浏览器就不会去读取缓存，能保证这次请求一定是从服务器上读取的最新的index.js文件。

说回webpack，webpack提供一种在文件名里面嵌入hash的方式，每次打包都生成新的文件名，例如：

const path = require("path");
module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js",
    }
}

上面的代码，build之后，我们可能会得到类似于：index.94f49d9b5ee809be277c.js 和 main.4afbc09e2f228ea4bc2f.js的文件。前面我们说到，Webpack里面有三种hash，分别是：hash, chunkhash, contenthash，接下来我们来看看三者的区别以及使用场景。

二：hash

const path = require("path");
module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].js",
    }
}

我们执行npm run build之后得到：

大家从图上可以看到index.js和main.js文件的hash是一样的。hash是项目级别的，他的缺点是假如我只改了其中一个文件，但是所有文件的文件名里面的hash都是一样的。这样会导致本来应该被浏览器缓存的文件，强制要去服务器读取一遍，但是这个文件又和之前的旧文件并没有区别，这样就很不好了。那能不能做到只有改变了文件，hash值才变，而没有改变的文件，文件名里面的hash值就不变呢？答案就是chunkhash。
三：chunkhash
chunkhash是针对entry的每一个入口文件，独立的hash。如果entry里面的其中一个文件内容改变，只会改变这个入口文件build之后的文件名，而不会影响到其他文件。

const path = require("path");
module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js",
    }
}

我们执行一次npm run build,得到：

我们改动一下./src/main.js文件的内容，但是不修改./src/index.js，再执行一次npm run build,得到：

对比以上2张图可以看出来index.js文件的hash值没有改变，但是main.js的hash值改变了。

四：contenthash

云服务器 GPU云服务器 chunkhash contenthash Hashes Hash

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104147.html

webpack4 的生产环境优化

摘要：的生产环境优化完整配置的可以参考本文主要介绍了生产环境我都做了哪些优化文章的结构如下静态资源路径。分配不同的关于稳定性的坑注意区分整个项目有变动时，变化。而生产环境可以这一项，因为我们不需要在生产环境调试代码。 webpack4 的生产环境优化 webpack4完整配置的可以参考： https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产...

bang590 2019-08-23 10:34 评论0 收藏0
深入理解 Webpack 打包分块（上）

摘要：而一个哈希字符串就是根据文件内容产生的签名，每当文件内容发生更改时，哈希串也就发生了更改，文件名也就随之更改。很显然这不是我们需要的，如果文件内容发生了更改，的打包文件的哈希应该发生变化，但是不应该。前言随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽...

Rocko 2019-05-21 16:11 评论0 收藏0
Webpack4 搭建 Vue 项目

摘要：前言由于打包工具的影响，也追求零配置搭建项目。本文就带你绕过，用一步步搭建项目。解决文件中引入的文件名因变动而变动的问题项目源码 1. 前言由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli...

2shou 2019-08-23 11:55 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

pekonchan 2019-08-06 13:24 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

娣辩孩 2019-08-20 18:16 评论0 收藏0