webpack 文件指纹

优点：

• 用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹；
• 对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。

如何生成文件指纹

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

占位符名称	定义
[ext]	资源后缀名
[name]	文件名称
[path]	文件的相对路径
[folder]	文件所在的文件夹
[contenthash]	文件的内容hash，默认是md5生成
[hash]	文件的内容hash，默认是md5生成
[emoji]	一个随机的指代文件内容的emoji

JS文件指纹设置

设置output的 filename，使用 [chunkhash]
chunkhash使用的是md5加密，hash值长度为32位，[chunkhash:8]表示取hash值的前8位

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
  },

CSS文件指纹设置

需要先使用MiniCssExtractPlugin将css提取成独立的文件，然后使用[contenthash]设置文件指纹

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  plugins: [
    // 把css提取成单独的文件
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    })
  ]

注意：style-loader的作用是把样式插入到head里面，而MiniCssExtractPlugin插件的功能是把样式提取成独立的文件，所以MiniCssExtractPlugin插件的loader无法与style-loader一起使用，因为他们的功能是互斥的，会有一些冲突。

      {
        test: /.css$/,
        use: [
          // 'style-loader', 需要删掉原有的style-loader
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },

图片的文件指纹设置

设置file-loader的name，使用[hash]

      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]'
            }
          }
        ]
      },