文件指纹就是打包后输出文件的后缀，每次构建都会生成不同的文件后缀，这样可以防止浏览器的默认缓存，使客户端代码可以及时修改。
文件指纹的三种方式：
- hash ：基于整个项目构建内容生成全局哈希值，任何文件修改都会导致值变化，不适合缓存优化。
- chunkhash ：为每个入口文件生成独立哈希值，仅当文件或依赖模块内容变化时更新，利于缓存控制，适合用于入口文件及其依赖模块的缓存优化。
- contenthash ：根据文件内容生成哈希值，内容不变则值不变，常用于CSS/JS等静态资源。
npm install mini-css-extract-plugin -D
npm i copy-webpack-plugin -D
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {output: {// 对于 JS 文件，通常使用 chunkhashfilename: 'js/[name].[chunkhash:8].js',// 对于非入口 chunk，如异步加载的模块chunkFilename: 'js/[name].[chunkhash:8].chunk.js',// 输出目录path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader,},'css-loader']}]},plugins: [// 对于 CSS 文件，使用 contenthashnew MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].chunk.css'}),// 处理图片等资源new CopyWebpackPlugin({patterns: [{from: path.resolve(__dirname, 'src/assets'),to: 'assets/[name].[hash:8].[ext]'}]})]
};
说明
总结
[name] 表示模块名称[hash:8]、[chunkhash:8]、[contenthash:8] 表示取哈希值的前 8 位- 通常建议将不同类型的文件放在不同目录（如 js/、css/、assets/）便于管理
- JS 文件推荐使用
chunkhash - CSS 文件推荐使用
contenthash（需要配合 MiniCssExtractPlugin） - 图片等静态资源可以使用
hash 或 contenthash - 哈希长度一般取 8-16 位即可，既能保证唯一性又不会过长
