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

什么是文件指紋

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

文件指紋的作用

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

文件指紋策略

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

Chunkhash

和webpack打包的chunk有關(guān)，不同的entyr會生成不同的Chunkhash值（一個頁面的值改變了并不會影響另一個頁面，js文件一般采用此方法），chunkhash和hash不一樣，它根據(jù)不同的入口文件(Entry)進行依賴文件解析、構(gòu)建對應(yīng)的chunk，生成對應(yīng)的哈希值。我們在生產(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ā)生了改變，導(dǎo)致css文件會重復(fù)構(gòu)建。

這個時候，我們可以使用extra-text-webpack-plugin里的contenthash值，保證即使css文件所處的模塊里就算其他文件內(nèi)容改變，只要css文件內(nèi)容不變，那么不會重復(fù)構(gòu)建。

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

占位符介紹

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

文件指紋的設(shè)置

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

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

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

JS文件指紋設(shè)置

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

output:{//打包輸出文件

path:path.join(__dirname,'dist'),

filename:'[name]_[chunkhash:8].js'//chunkhash指紋策略，截取前面8個字符

}

圖片文件指紋設(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時，將其轉(zhuǎn)化為base64

},

CSS文件指紋設(shè)置

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

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

注意：MiniCssExtractPlugin這個插件沒辦法與style-loader一起使用，因為它們之間的功能是互斥的，所以需要將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'

}

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

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

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

"scripts":{

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

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

"wat