index.51727db.js中51727db就是一个文件指纹，文件指纹的作用有两种：
- 版本管理：版本发布时，不同的版本对应不同的文件指纹（只要文件有修改）。
- 控制缓存：当文件修改后，文件指纹就会改变，从而获取最新内容，不会取缓存。没有修改的文件会继续取缓存。
一、文件指纹的类别
一共有三种：
-
Hash：和整个项目的构建有关，如果项目中有文件更改，整个项目的hash值都会改变。
-
Chunkhash：根据不同的entry进行文件解析，依赖分析，构建不同的chunk，生成不同的hash值，在实际的开发中，将公共库和程序入口区分开，生成不同的chunk，公共库的文件改变不会影响程序入口的hash，无法和热更新一起使用。
-
ContentHash：根据文件的内容生成hash，内容不变，hash不变。
js使用Chunkhash，css使用ContentHash，因为如果都是用Chunkhash，一旦js改变，css没有改变，css文件的hash也会跟着改变。而css使用ContentHash，只要文件内容没有改变，hash就不会改变。
Hash和ContentHash默认是md5生成的，32位。
二、占位符的类别
-
[hash]
-
[contenthash]
-
[ext]：文件的扩展名
-
[name]：文件的名称
-
[path]：文件的绝对路径
-
[folder]：文件所在的文件夹
-
[emoji]：一个随机的代之文件内容的emoji。
例子：
const path = require("path");const HtmlWebpacPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = { mode: "development", entry: "./src/index.js", output: { path: path.join(__dirname, "dist"), filename: "[name]_[chunkhash:8].js", }, module: { rules: [ { test: /\.css/, use: [MiniCssExtractPlugin.loader, "css-loader"], }, { test: /\.js$/, use: "babel-loader", }, { test: /\.(jpg|png|jpeg|gif)$/, use: { loader: "file-loader", options: { name: "[name]_[hash].[ext]", outputPath: "imgs/", }, }, }, ], }, plugins: [ new HtmlWebpacPlugin({ template: "./src/index.html" }), new MiniCssExtractPlugin({ filename: "[name]_[contenthash:8].css" }), ],};
