关于前端:不要再傻傻分不清-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 的内容能够参考我其它的博文，继续更新中~