Webpack的文件指纹

1. 什么是文件指纹？

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

2. 文件指纹有哪几种？

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

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

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

3. JS的文件指纹设置；

1.  
   'use strict';
2.  
    
3.  
   const path = require('path');
4.  
    
5.  
   module.exports = {
6.  
   entry: {
7.  
   index: './src/index.js',
8.  
   search: './src/search.js'
9.  
   },
10.  
    output: {
11.  
    path: path.join(__dirname, 'dist'),
12.  
    // 设置chunkhash，长度为8位
13.  
    filename: '[name]_[chunkhash:8].js'
14.  
    }
15.  
    };

4. CSS的文件指纹设置；

1.  
   'use strict';
2.  
    
3.  
   const path = require('path');
4.  
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5.  
    
6.  
   module.exports = {
7.  
    
8.  
   entry: {
9.  
   index: './src/index.js',
10.  
    search: './src/search.js'
11.  
    },
12.  
     
13.  
    output: {
14.  
    path: path.join(__dirname, 'dist'),
15.  
    filename: '[name]_[chunkhash:8].js'
16.  
    },
17.  
     
18.  
    plugins: [
19.  
    new MiniCssExtractPlugin({
20.  
    // 设置CSS为contenthash，长度为8位
21.  
    filename: '[name]_[contenthash:8].css'
22.  
    })
23.  
    ]
24.  
    };

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

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

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

1.  
   'use strict';
2.  
    
3.  
   const path = require('path');
4.  
   // npm i mini-css-extract-plugin -D
5.  
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6.  
    
7.  
   module.exports = {
8.  
   entry: {
9.  
   index: './src/index.js',
10.  
    search: './src/search.js'
11.  
    },
12.  
    output: {
13.  
    path: path.join(__dirname, 'dist'),
14.  
    // 设置JS的文件指纹为chunkhash，长度为8位
15.  
    filename: '[name]_[chunkhash:8].js'
16.  
    },
17.  
    mode: 'production',
18.  
    module: {
19.  
    rules: [
20.  
    {
21.  
    test: /.js$/,
22.  
    use: 'babel-loader'
23.  
    },
24.  
    {
25.  
    test: /.css$/,
26.  
    use: [
27.  
    // 去掉style-loader，将CSS单独提取一个文件
28.  
    MiniCssExtractPlugin.loader,
29.  
    'css-loader'
30.  
    ]
31.  
    },
32.  
    {
33.  
    test: /.less$/,
34.  
    use: [
35.  
    // 去掉style-loader，将CSS单独提取一个文件
36.  
    MiniCssExtractPlugin.loader,
37.  
    'css-loader',
38.  
    'less-loader'
39.  
    ]
40.  
    },
41.  
    {
42.  
    test: /.(png|jpg|gif|jpeg)$/,
43.  
    use: [
44.  
    {
45.  
    loader: 'file-loader',
46.  
    options: {
47.  
    // 设置的图片指纹为hash，长度为8位
48.  
    name: '[name]_[hash:8].[ext]'
49.  
    }
50.  
    }
51.  
    ]
52.  
    },
53.  
    {
54.  
    test: /.(woff|woff2|eot|ttf|otf)$/,
55.  
    use: [
56.  
    {
57.  
    loader: 'file-loader',
58.  
    options: {
59.  
    // 设置字体的指纹为hash，长度为8位
60.  
    name: '[name]_[hash:8][ext]'
61.  
    }
62.  
    }
63.  
    ]
64.  
    }
65.  
    ]
66.  
    },
67.  
    plugins: [
68.  
    // 将CSS提取出来一个文件
69.  
    new MiniCssExtractPlugin({
70.  
    filename: '[name]_[contenthash:8].css'
71.  
    })
72.  
    ]
73.  
    };

这篇好文章是转载于：学新通技术网