不要再傻傻分不清 hash、 chunkhash 和 contenthash 啦

hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。

文件名不带哈希值

webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 部分配置省略
  entry: {
    index: './src/index.js',
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name].css',
    }),
  ],
};

在 index.js 中使用 axios 发送请求，main.js 中引入 index.css资源

src
 ├─ index.css
 ├─ index.js
 └─ main.js

编译后，虽然我们自己定义的 css 文件名为 index.css，但是由于它被 main.js引入了，所以打包出来的文件名变成了 main.css。

559.js 是单独打包的第三方库 axios。

每一次编译后，生成的文件名都一样，这样会存在一个问题，通过 webpack 编译生成的静态文件会被我们放置到服务器中，当编译后的文件更新时，由于浏览器或者服务器设置的缓存策略，同名文件可能不会立刻被更新，导致用户访问到的仍然是上一次的版本。

hash

为了解决这个问题，我们通常会在文件名上加一些哈希值，保证当更新文件时，浏览器会重新下载资源。这里使用 hash 这个占位符

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[hash].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[hash].css',
    }),
  ],
};

此时 js 和 css 文件都加上了一串相同的哈希值。

当项目里没有文件发生改变时，无论如何重新编译，文件哈希值都不会变。但此时，改变了 index.js 文件，增加一句输出，所有文件的哈希值都会同时改变。

所有文件的哈希值都发生了变化，导致即使只更新了一个文件都需要重新加载所有资源，还是有些浪费性能的。

chunkhash

这里是多入口的项目，只改变了 index.js 这个入口，不希望 main.js 入口的文件也被修改，就可以使用占位符 chunkhash 来解决，另外哈希值比较长，截取八位显示。

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[chunkhash:8].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[chunkhash:8].css',
    }),
  ],
};

可以看到同一个 chunk 打包出来的哈希值是一样的

当修改了 css 文件时，只有同 chunk 的 main.js 和 main.css 文件的哈希值发生了改变

css 文件是在 main.js 这个 chunk 的，但其实 main.js 本身没有发生任何修改，可以不用重新加载。

contenthash

同一个 chunk 中，部分文件修改导致所有文件的哈希值发生变化的问题，可以使用 contenthash 来解决，contenthash 只和每一个文件的内容有关，内容发生变化，则重新生成哈希值。

module.exports = {
  // 部分配置省略
  output: {
    filename: '[name]_[contenthash:8].js',
    path: path.resolve(__dirname, "./dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './[name]_[contenthash:8].css',
    }),
  ],
};

每一个文件生成的哈希值都不一样

在 main.js 中增加一行输出，引入的 css 内容没有发生变化，css 文件也不会更改哈希值。

总结

在 webpack 中有三种生成哈希值规则的方式，可以用来区分文件是否修改。

• hash 与整个项目有关，项目里有文件修改，所有文件的哈希值都会变化。
• chunkhash 与入口有关，同一入口的文件被视为一个整体，当其中一个文件修改时，同入口的所有文件哈希值发生改变。
• contenthash 只与文件内容有关，文件内容发生改变，才会更改该文件的哈希值。

善用文件的哈希值，解决浏览器缓存导致的资源未及时更新的问题。

以上就是 webpack 中 hash、 chunkhash 和 contenthash 的介绍，更多有关 webpack 的内容可以参考我其它的博文，持续更新中~