什么是文件指紋

文件指紋是文件打包后輸出的文件名的后綴，通常用來做一些文件的版本管理

文件指紋的作用

• 用作版本管理時，如果一個項目需要發(fā)布，只需要發(fā)布修改過的文件指紋；
• 對于沒有修改過的文件，用戶在訪問的時候，依舊可以使用瀏覽器緩存好的，無需二次加載，加速頁面訪問。

文件指紋策略

• Hash

和整個項目的構(gòu)建相關(guān)，只要項目文件有修改，整個項目構(gòu)建的hash值就會更改，并且全部文件都共用相同的hash值

• Chunkhash

和webpack打包的chunk有關(guān)，不同的entyr會生成不同的Chunkhash值（一個頁面的值改變了并不會影響另一個頁面，js文件一般采用此方法），chunkhash和hash不一樣，它根據(jù)不同的入口文件(Entry)進行依賴文件解析、構(gòu)建對應的chunk，生成對應的哈希值。我們在生產(chǎn)環(huán)境里把一些公共庫和程序入口文件區(qū)分開，單獨打包構(gòu)建，接著我們采用chunkhash的方式生成哈希值，那么只要我們不改動公共庫的代碼，就可以保證其哈希值不會受影響。

• Contenthash

根據(jù)文件內(nèi)容來定義hash，文件內(nèi)容不變，則contenthash不變（css文件一般采用此方法）。

比如文件index.css被index.js引用了，所以共用相同的chunkhash值。但是這樣子有個問題，如果index.js更改了代碼，css文件就算內(nèi)容沒有任何改變，由于是該模塊發(fā)生了改變，導致css文件會重復構(gòu)建。
這個時候，我們可以使用extra-text-webpack-plugin里的contenthash值，保證即使css文件所處的模塊里就算其他文件內(nèi)容改變，只要css文件內(nèi)容不變，那么不會重復構(gòu)建。

hash一般是結(jié)合CDN緩存來使用，通過webpack構(gòu)建之后，生成對應文件名自動帶上對應的MD5值。如果文件內(nèi)容改變的話，那么對應文件哈希值也會改變，對應的HTML引用的URL地址也會改變，觸發(fā)CDN服務器從源服務器上拉取對應數(shù)據(jù)，進而更新本地緩存。但是在實際使用的時候，這幾種hash計算還是有一定區(qū)別。

占位符介紹

文件指紋的設置

根據(jù)不同的文件類型一般選擇不同的文件指紋策略，通常情況下：

• JS文件采用[chunkhash]文件指紋策略
• CSS文件采用[contenthash]文件指紋策略
• JS文件采用[hash]文件指紋策略

下面我們來介紹下幾種用法

JS文件指紋設置

設置output的filename，使用[chunkhash]，chunkhash沒辦法和熱更新一起使用的，不能與HotModuleReplacementPlugin這個插件一起使用，所以我們只在生產(chǎn)環(huán)境寫。

output: {                               //打包輸出文件
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'	//chunkhash指紋策略，截取前面8個字符
    }

圖片文件指紋設置

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

module: {
        rules: [
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash:8].[ext]',
                        limit: 10240 //不超過10K時，將其轉(zhuǎn)化為base64
                    }
                }
            },
    },

CSS文件指紋設置

CSS文件指紋策略比較特殊，我們需要用到MiniCssExtractPlugin，設置MiniCssExtractPlugin 的 filename，使用[contenthash]。

正常情況下，如果我們使用了style-loader和css-loader的話，那么這個css會由style-loader將css插入到style里面，并且放到head頭部，此時并沒有一個獨立的css文件，因此，我們通常會采用MiniCssExtractPlugin，通過這個插件把這個style-loader的css提取成一個獨立的文件，所以，對于這個css的文件指紋，我們會設置在這個MiniCssExtractPlugin里面，給它設置一個filename，并且給它設置一個[contenthash]。

注意：MiniCssExtractPlugin這個插件沒辦法與style-loader一起使用，因為它們之間的功能是互斥的，所以需要將style-loader換成MiniCssExtractPlugin.loader。

設置步驟

首先安裝MiniCssExtractPlugin

npm i -D mini-css-extract-plugin

配置webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
......
module.exports = {
        plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ],
}

文件指紋項目應用

將webpack.config.js文件更名為webpack.dev.js并將內(nèi)部的mode修改為development，再復制一份文件，更名為webpack.prod.js將mode修改為production。

然后需要修改配置文件package.json區(qū)分production和development

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch --progress",
    "dev": "webpack-dev-server -config webpack.dev.js --open"
  }

完成上述步驟，我們在項目中就可以根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境不同，配置不同的文件指紋。

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

最新評論