一文入門Webpack文件指紋

第一文入門Webpack文件指紋目錄什么是文件指紋文件指紋的作用文件指紋策略占位符介紹文件指紋的設(shè)置JS文件指紋設(shè)置圖片文件指紋設(shè)置CSS文件指紋設(shè)置設(shè)置步驟文件指紋項(xiàng)目應(yīng)用

什么是文件指紋

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

文件指紋的作用

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

文件指紋策略

和整個(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)容來(lái)定義hash，文件內(nèi)容不變，則contenthash不變（css文件一般采用此方法）。

比如文件index.css被index.js引用了，所以共用相同的chunkhash值。但是這樣子有個(gè)問(wèn)題，如果index.js更改了代碼，css文件就算內(nèi)容沒(mé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緩存來(lái)使用，通過(guò)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ū)別。

占位符介紹

占位符名稱定義[ext]資源后綴名[name]文件名稱[path]文件的相對(duì)路徑[folder]文件所在的文件夾[contenthash]文件的內(nèi)容hash，默認(rèn)是md5生成[hash]文件的內(nèi)容hash，默認(rèn)是md5生成[emoji]一個(gè)隨機(jī)的指代文件內(nèi)容的emoji

文件指紋的設(shè)置

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

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

下面我們來(lái)介紹下幾種用法

JS文件指紋設(shè)置

設(shè)置output的filename，使用[chunkhash]，chunkhash沒(méi)辦法和熱更新一起使用的，不能與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//不超過(guò)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í)并沒(méi)有一個(gè)獨(dú)立的css文件，因此，我們通常會(huì)采用MiniCssExtractPlugin，通過(guò)這個(gè)插件把這個(gè)style-loader的css提取成一個(gè)獨(dú)立的文件，所以，對(duì)于這個(gè)css的文件指紋，我們會(huì)設(shè)置在這個(gè)MiniCssExtractPlugin里面，給它設(shè)置一個(gè)filename，并且給它設(shè)置一個(gè)[contenthash]。

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

設(shè)置步驟

首先安裝MiniCssExtractPlugin

npmi-Dmini-css-extract-plugin

配置webpack.config.js

constMiniCssExtractPlugin=require('mini-css-extract-plugin');

......

module.exports={

plugins:[

newMiniCssExtractPlugin({

filename:'[name][contenthash:8].css'

}

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

將webpack.config.js文件更名為webpack.dev.js并將內(nèi)部的mode修改為development，再?gòu)?fù)制一份文件，更名為d.js將mode修改為production。

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

"scripts":{

"test":"echo\"Error:notestspecified\"exit1",

"build":"webpack--configd.js",

"wat