什么是文件指紋

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

文件指紋的作用

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

文件指紋策略

• Hash

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

• Chunkhash

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

• Contenthash

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

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

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

占位符介紹

文件指紋的設(shè)置

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

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

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

JS文件指紋設(shè)置

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

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

圖片文件指紋設(shè)置

設(shè)置file-loader的name，使用[hash]。

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

CSS文件指紋設(shè)置

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

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

注意：MiniCssExtractPlugin這個(gè)插件沒辦法與style-loader一起使用，因?yàn)樗鼈冎g的功能是互斥的，所以需要將style-loader換成MiniCssExtractPlugin.loader。

設(shè)置步驟

首先安裝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'
        })
    ],
}

文件指紋項(xiàng)目應(yīng)用

將webpack.config.js文件更名為webpack.dev.js并將內(nèi)部的mode修改為development，再?gòu)?fù)制一份文件，更名為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"
  }

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

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

最新評(píng)論