Webpack中的文件指纹的实现

1. 什么是文件指纹？

文件指纹就是打包后输出的文件名的后缀，主要用来对修改后的文件做版本区分。

2. 文件指纹有哪几种？

1. Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改，一般用于图片设置；

2. Chunkhash：与 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值，一般用于设置JS文件；

3. Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变，一般用于设置CSS文件；

3. JS的文件指纹设置；

'use strict';

const path = require('path');

module.exports = {
   entry: {
       index: './src/index.js',
       search: './src/search.js'
   },
   output: {
       path: path.join(__dirname, 'dist'),
       // 设置chunkhash，长度为8位
       filename: '[name]_[chunkhash:8].js'
   }
};

4. CSS的文件指纹设置；

'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'
   },

plugins: [
       new MiniCssExtractPlugin({
           // 设置CSS为contenthash，长度为8位
           filename: '[name]_[contenthash:8].css'
       })
   ]
};

5. 图片的文件指纹设置；

图片文件的指纹设置使用file-loader，常用的占位符的含义如下：

图片的文件指纹设置如下：

'use strict';

const path = require('path');
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
   entry: {
       index: './src/index.js',
       search: './src/search.js'
   },
   output: {
       path: path.join(__dirname, 'dist'),
       // 设置JS的文件指纹为chunkhash，长度为8位
       filename: '[name]_[chunkhash:8].js'
   },
   mode: 'production',
   module: {
       rules: [
           {
               test: /.js$/,
               use: 'babel-loader'
           },
           {
               test: /.css$/,
               use: [
                   // 去掉style-loader，将CSS单独提取一个文件
                   MiniCssExtractPlugin.loader,
                   'css-loader'
               ]
           },
           {
               test: /.less$/,
               use: [
                   // 去掉style-loader，将CSS单独提取一个文件
                   MiniCssExtractPlugin.loader,
                   'css-loader',
                   'less-loader'
               ]
           },
           {
               test: /.(png|jpg|gif|jpeg)$/,
               use: [
                   {
                       loader: 'file-loader',
                       options: {
                           // 设置的图片指纹为hash，长度为8位
                           name: '[name]_[hash:8].[ext]'
                       }
                   }
               ]
           },
           {
               test: /.(woff|woff2|eot|ttf|otf)$/,
               use: [
                   {
                       loader: 'file-loader',
                       options: {
                           // 设置字体的指纹为hash，长度为8位
                           name: '[name]_[hash:8][ext]'
                       }
                   }
               ]
           }
       ]
   },
   plugins: [
       // 将CSS提取出来一个文件
       new MiniCssExtractPlugin({
           filename: '[name]_[contenthash:8].css'
       })
   ]
};

来源：https://blog.csdn.net/weixin_40629244/article/details/128539863