文件指紋就是打包后輸出文件的后綴，每次構建都會生成不同的文件后綴，這樣可以防止瀏覽器的默認緩存，使客戶端代碼可以及時修改。
文件指紋的三種方式：
- ??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 位即可，既能保證唯一性又不會過長
