快捷導(dǎo)航

Webpack中的文件指紋的實(shí)現(xiàn)

更新時(shí)間：2023年01月09日 10:12:52 作者：aiguangyuan

本文主要介紹了Webpack中的文件指紋的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 什么是文件指紋？

文件指紋就是打包后輸出的文件名的后綴，主要用來(lái)對(duì)修改后的文件做版本區(qū)分。

2. 文件指紋有哪幾種？

1. Hash：和整個(gè)項(xiàng)目的構(gòu)建相關(guān)，只要項(xiàng)目文件有修改，整個(gè)項(xiàng)目構(gòu)建的 hash 值就會(huì)更改，一般用于圖片設(shè)置；

2. Chunkhash：與 webpack 打包的 chunk 有關(guān)，不同的 entry 會(huì)生成不同的 chunkhash 值，一般用于設(shè)置JS文件；

3. Contenthash：根據(jù)文件內(nèi)容來(lái)定義 hash ，文件內(nèi)容不變，則 contenthash 不變，一般用于設(shè)置CSS文件；

3. JS的文件指紋設(shè)置；

'use strict';
 
const path = require('path');
 
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // 設(shè)置chunkhash，長(zhǎng)度為8位
        filename: '[name]_[chunkhash:8].js'
    }
};

4. CSS的文件指紋設(shè)置；

'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({
            // 設(shè)置CSS為contenthash，長(zhǎng)度為8位
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

5. 圖片的文件指紋設(shè)置；

圖片文件的指紋設(shè)置使用file-loader，常用的占位符的含義如下：

圖片的文件指紋設(shè)置如下：

'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'),
        // 設(shè)置JS的文件指紋為chunkhash，長(zhǎng)度為8位
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    // 去掉style-loader，將CSS單獨(dú)提取一個(gè)文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    // 去掉style-loader，將CSS單獨(dú)提取一個(gè)文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 設(shè)置的圖片指紋為hash，長(zhǎng)度為8位
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 設(shè)置字體的指紋為hash，長(zhǎng)度為8位
                            name: '[name]_[hash:8][ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 將CSS提取出來(lái)一個(gè)文件
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

到此這篇關(guān)于Webpack中的文件指紋的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Webpack 文件指紋內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: