• 打包后输出的文件名的后缀
  • 比如：
  • 作用：便于版本管理

文件指纹策略作用于服务的增量更新。

增量更新是指在进行更新操作时，只更新需要改变的地方，不需要更新或者已经更新过的地方则不会重复更新，增量更新与完全更新相对。 这种更新的概念应用范围比较广泛，凡是需要进行数据更新的地方都会用到，如软件更新、数据库更新、杀毒软件的病毒库更新、CMS 更新和路由表更新等。

占位符

Webpack 为此提供占位符。这些字符串用于将特定信息附加到 Webpack 输出。

hash、chunkhash、contenthash 如何生成

• Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
• Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值
• Contenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变

JS 一般使用 chunkHash css 一般使用 contentHash 图片 一般使用 hash

JS文件指纹的设置

• 设置 output 的 filename，使用[chunkhash] ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’); const webpack = require(‘webpack’)

module.exports = { entry: { index: ‘./src/index.js’, search: ‘./src/search.js’, }, output: { path: path.join(__dirname, ‘dist’), filename: ‘[name][chunkhash:8].js’, }, }

<a name="nknTw"></a>
# CSS文件指纹的设置
- 设置MiniCssExtractPlugin的filename
   - 下载包：`npm i mini-css-extract-plugin -D`
   - 使用contenthash
   - 前提：用`MiniCssExtractPlugin.loader`代替`style-loader`
```javascript
// webpack.config.js
'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name][chunkhash:8].js',
  },
    module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
      {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name][contenthash:8].css'
    }),
  ],
  mode: 'development',
}

图片的文件指纹的设置

• 设置file-loader的name，使用[hash] | 占位符的名称 | 含义 | | —- | —- | | [ext] | 资源后缀名 | | [name] | 文件名称 | | [path] | 文件相对路径 | | [folder] | 文件所在的文件夹 | | [contenthash] | 文件的内容hash，默认是md5生成 | | [hash] | 文件内容的hash，默认是md5生成 | | [emoji] | 一个随机的指代文件内容的emoji |

'use strict';
const path = require('path');
const webpack = require('webpack')
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name][hash:8].[ext]'
            }
          }
        ]
      },
    ]
  },
}

自动清理构建的目标产物

• 问题：加了文件指纹后，每次更新的时候不会清理目标，造成构建的输出目录output出来的文件越来越多
• 两种解决方法
  • 通过package.json的scripts，添加命令行
    • rm -rf ./dist && webpack 或 rimraf ./dist && webpack
  • 使用 clean-webpack-plugin
    • 默认删除output指定的输出目录
    • 下载包：cnpm i clean-webpack-plugin -D ```javascript ‘use strict’; const path = require(‘path’); const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

module.exports = { plugins: [ new CleanWebpackPlugin() ], mode: ‘production’, } ```