在前端开发中，我们经常需要将多个 JS 和 CSS 文件打包成一个或多个文件，以便于浏览器加载。然而，由于文件的缓存机制，当我们修改了一个文件，但不修改文件名时，浏览器可能仍然会读取缓存中的旧文件，导致页面无法正常显示。
为了解决这个问题，我们可以使用 webpack 提供的文件指纹机制，给每个文件添加一个唯一的标识符。这样，当文件内容发生变化时，webpack 会自动更新文件名，浏览器就会重新加载最新的文件。
在本文中，我们将介绍 webpack 文件指纹优化的一个重要插件：webpack-md5-hash。它能够为每个文件生成一个不同的 MD5 值，并将其作为文件名的一部分。这样，只要文件内容发生变化，文件名就会随之改变，浏览器就会重新加载最新的文件。
安装
使用 npm 安装：
npm install webpack-md5-hash --save-dev
配置
在 webpack.config.js 中配置 webpack-md5-hash 插件：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
entry: {
app: './src/index.js',
vendor: './src/vendor.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin('[name].[contenthash].css'),
new WebpackMd5Hash()
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
}
};上述配置中，我们引入了 webpack-md5-hash 插件，并将其实例化后加入到 plugins 数组中。
同时，我们修改了 output.filename 的配置，使用 [name].[chunkhash].js 作为文件名。其中，[chunkhash] 会根据文件内容生成一个唯一的哈希值，用于区分不同版本的文件。
示例
假设我们有以下文件结构：
src/
├── index.js
├── style.css
└── images/
└── logo.png其中，index.js 和 style.css 分别为我们的 JS 和 CSS 文件，images/logo.png 为一张图片。
我们在 index.js 中引入 style.css 和 logo.png：
import './style.css';
import logo from './images/logo.png';
console.log('Hello, webpack!');style.css 中包含了一些简单的样式：
body {
background-color: #eee;
}
h1 {
color: #333;
}
.logo {
width: 200px;
height: 100px;
}index.html 文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Example</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Hello, webpack!</h1>
<img class="logo" src="logo.png" alt="Logo">
<script src="vendor.js"></script>
<script src="app.js"></script>
</body>
</html>我们运行 webpack 命令进行打包：
webpack --config webpack.config.js
打包完成后，我们可以在 dist 目录下找到生成的文件：
dist/ ├── app.7f9e1b8e7b3f0b5f5c5c.js ├── app.7f9e1b8e7b3f0b5f5c5c.js.map ├── app.7f9e1b8e7b3f0b5f5c5c.js.gz ├── app.7f9e1b8e7b3f0b5f5c5c.js.map.gz ├── app.7f9e1b8e7b3f0b5f5c5c.js.br ├── app.7f9e1b8e7b3f0b5f5c5c.js.map.br ├── app.css ├── app.css.map ├── app.css.gz ├── app.css.map.gz ├── app.css.br ├── app.css.map.br ├── index.html ├── logo.1f6f3b9d0e3a32c6d0f6.png ├── logo.1f6f3b9d0e3a32c6d0f6.png.gz ├── logo.1f6f3b9d0e3a32c6d0f6.png.br ├── vendor.1f6f3b9d0e3a32c6d0f6.js ├── vendor.1f6f3b9d0e3a32c6d0f6.js.map ├── vendor.1f6f3b9d0e3a32c6d0f6.js.gz ├── vendor.1f6f3b9d0e3a32c6d0f6.js.map.gz ├── vendor.1f6f3b9d0e3a32c6d0f6.js.br └── vendor.1f6f3b9d0e3a32c6d0f6.js.map.br
可以看到，我们的 JS 和 CSS 文件名中都包含了 [chunkhash]，并且图片文件名也被改成了一个唯一的值。
当我们修改 style.css 或 logo.png 文件时，重新运行 webpack 打包后，可以发现生成的文件名都已经被更新了。
总结
webpack-md5-hash 插件能够为每个文件生成一个唯一的哈希值，并将其作为文件名的一部分，从而解决文件缓存的问题。使用该插件可以让我们的前端开发更加高效、稳定。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bc41acadd4f0e0ff4f2d31