閱讀目錄
一. 理解使用hash
一般情況下，對於前端靜態資源，瀏覽器訪問的時候希望資源都能夠進行快取，當第二次及以後進入頁面的時候，頁面就可以直接使用快取資源，這樣的話，頁面開啟速度很快，提高了使用者體驗同時也節省了頻寬資源。而其中最為常見的一種最大化利用快取的形式就是為靜態資源加上hash, 使用一個不會重複的識別符號來達到資源可以永久快取的目的。
瀏覽器快取方法有很多種，那麼下面我們分別使用hash, chunkhash和contenthash來理解下。
在理解hash, chunkhash和contenthash之前，我們首先看看我們專案的基本架構如下：
### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |--- js # 存放所有js檔案 | | |-- demo1.js | | |-- main.js # js入口檔案 | |--- webpack.config.js # webpack配置檔案 | |--- webpack.dll.config.js # 打包第三方依賴的庫檔案 | |--- index.html # html檔案 | |--- styles # 存放所有的css樣式檔案 | | |-- main.styl # main.styl檔案 | | |-- index.styl | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉碼檔案
1. 理解使用hash
hash的預設長度為20個字元，可以使用[hash:8]這樣的方式來配置，代表hash使用8個字元來表示。
webpack.config.js 配置程式碼如下(入口檔案分別為main和demo1)：
module.exports = { // 入口檔案 entry: { main: './js/main.js', demo1: './js/demo1.js' }, output: { filename: '[name].[hash].js', // 將輸出的檔案都放在dist目錄下 path: path.resolve(__dirname, 'dist') } }
在dist目錄打包成如下：
如上可以看到，main.js中hash編碼和demo1.js中的hash編碼是一模一樣的。現在我改下main.js程式碼後，繼續打包一下可以看到如下資訊：
可以看到，demo1.js程式碼其實我並沒有改動，但是它因為main.js程式碼改動了導致他的hash編碼也改變了。
hash理解為：當每次修改任何一個檔案後，所有檔案打包後的hash值都是一樣的，所以假如只是修改了任何一個檔案，整個專案的檔案快取都將失效。
hash為什麼會這樣呢？要理解這個問題，首先我們需要理解 the module identifier。webpack預設會為各個模組分配一個id作為標識，用來處理模組之間的依賴關係，但是預設的id命名規則則是根據模組引入的順序，賦予一個整數 (1,2,3..). 由於該hash是基於整個 module identifier序列計算得到的，因此js打包的時候使用該hash，所有的值都一樣的，但是任意刪除或者修改任何一個檔案的時候，都會對整個id序列造成影響，從而改變hash的值。
二：理解使用chunkhash
上面的hash有這個缺點，因此chunkhash出現了，它就是解決這個問題而出現的。我們接下來再把配置改成如下：
module.exports = { entry: { main: './js/main.js', demo1: './js/demo1.js' }, output: { filename: '[name].[chunkhash].js', // 將輸出的檔案都放在dist目錄下 path: path.resolve(__dirname, 'dist') } };
我們繼續執行打包完後，變成如下：
可以看到這時候main.js和demo1.js中的hash編碼不一樣了，因此接下來我們繼續隨便修改下main.js程式碼，繼續打包如下：
如上可以看到，我們只是改變了下 main.js程式碼，demo1.js程式碼並沒有改變，因此main.js程式碼的hash編碼值改變了，demo1.js的hash值編碼並沒有改變，因此當某個檔案改變的時候，只會重新請求該檔案，未改變的檔案不會重新請求，會快取裡面讀取。
三：對第三方庫打包後使用快取
通過上面使用chunkhash, 因此對於一些常用的庫，第三方檔案我們也可以使用chunkhash這麼做，這樣一來的話，第三方庫檔案在瀏覽器中會載入很快，因此對於第三方庫檔案我打算輸出到 專案中另一個檔案內，比如叫plugins資料夾內，比如如下webpack.dll.config.js 程式碼如下：
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
// 入口檔案
entry: {
// 專案中用到該兩個依賴庫檔案
jquery: ['jquery'],
echarts: ['echarts']
},
// 輸出檔案
output: {
// 檔名稱
filename: '[name].dll.[chunkhash].js',
// 將輸出的檔案放到dist目錄下
path: path.resolve(__dirname, './plugins'),
/*
存放相關的dll檔案的全域性變數名稱，比如對於jquery來說的話就是 _dll_jquery, 在前面加 _dll
是為了防止全域性變數衝突。
*/
library: '_dll_[name]'
},
mode: 'development',
plugins: [
// 使用外掛 DllPlugin
new DllPlugin({
/*
該外掛的name屬性值需要和 output.library儲存一致，該欄位值，也就是輸出的 manifest.json檔案中name欄位的值。
比如在jquery.manifest檔案中有 name: '_dll_jquery'
*/
name: '_dll_[name]',
/* 生成manifest檔案輸出的位置和檔名稱 */
path: path.join(__dirname, './plugins', '[name].manifest.json')
})
]
};
webpack.config.js 程式碼如下：
const path = require('path');
// 提取css的外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 清除dist目錄下的檔案
const ClearWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
// 引入HappyPack外掛
const HappyPack = require('happypack');
module.exports = {
// 入口檔案
entry: {
main: './js/main.js',
demo1: './js/demo1.js'
},
output: {
filename: '[name].[chunkhash].js',
// 將輸出的檔案都放在dist目錄下
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
// 使用正則去匹配
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader'
},
use: [
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=css-pack']
})
},
{
test: /\.(png|jpg)$/,
/*
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]'
}
*/
use: ['happypack/loader?id=image']
},
{
test: /\.js$/,
// 將對.js檔案的處理轉交給id為babel的HappyPack的實列
use: ['happypack/loader?id=babel'],
// loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除檔案
}
]
},
resolve: {
extensions: ['*', '.js', '.json']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
// contentBase: path.join(__dirname, "dist"),
port: 8081,
host: '0.0.0.0',
headers: {
'X-foo': '112233'
},
// hot: true,
inline: true,
// open: true,
overlay: true,
stats: 'errors-only'
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版檔案
}),
new ClearWebpackPlugin(['dist']),
new ExtractTextPlugin({
// 從js檔案中提取出來的 .css檔案的名稱
filename: `main.[chunkhash].css`
}),
// 告訴webpack使用了哪些第三方庫程式碼
new DllReferencePlugin({
context: path.join(__dirname),
// jquery 對映到json檔案上去
manifest: require('./plugins/jquery.manifest.json')
}),
new DllReferencePlugin({
context: path.join(__dirname),
// echarts 對映到json檔案上去
manifest: require('./plugins/echarts.manifest.json')
}),
/**** 使用HappyPack例項化 *****/
new HappyPack({
// 用唯一的識別符號id來代表當前的HappyPack 處理一類特定的檔案
id: 'babel',
// 如何處理.js檔案，用法和Loader配置是一樣的
loaders: ['babel-loader']
}),
new HappyPack({
id: 'image',
loaders: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: '[name].[ext]'
}
}]
}),
// 處理styl檔案
new HappyPack({
id: 'css-pack',
loaders: ['css-loader']
})
]
};
打包後變成如下：
第三方庫檔案一般情況下不會輕易更改，因此我們在頁面上引用的時候，直接把hash編碼值帶上，當第二次瀏覽器訪問的時候，第三方庫檔案會直接從快取裡面讀取(除js快取時間過期以外)，這樣的話，瀏覽器載入速度會更快。
四：contenthash
如上，第三方庫檔案已經解決了使用快取了，但是css檔案並沒有，比如在main.js程式碼內部應用了 main.styl， main.js程式碼如下：
require('../styles/main.styl');
$('#app').html('歡迎你來我的部落格');
console.log('這是main.js');
console.log(22333);
require('./demo1.js');
如下圖所示：
main.js 和 main.css 的hash編碼是一樣，因此我現在繼續更改main.js, 隨便加一行程式碼，然後繼續打包，會看到main.css的hash編碼也會跟著改變，其實main.css的檔案並沒有更改，其實我是想main.css直接還是使用快取就好。
也就是說 更改那個檔案，就對那個檔案使用新的hash編碼。沒有更改過的檔案，hash編碼不變。
main.js 程式碼變為如下：
require('../styles/main.styl');
$('#app').html('歡迎你來我的部落格');
console.log('這是main.js');
console.log(22333);
require('./demo1.js');
// 新增一行程式碼
console.log(22333111);
然後繼續打包，如下圖所示：
也可以看到main.css的hash編碼是跟著 main.js 編碼變動的。
其實根本原因還是 module identifier，因為 main.js 新引入的模組main.styl, 它改變了以後所有模組的 id 值，所以 main.css 檔案中引入的模組值發生了改變，於是 main.styl 的 chunkhash 也隨著發生改變。
為了解決這個問題，contenthash就出來了。
首先要分離css，之前是使用 extract-text-webpack-plugin 外掛，現在我們為了使用 contenthash，因此需要使用mini-css-extract-plugin外掛就可以了。具體配置程式碼如下：
// 引入 mini-css-extract-plugin 外掛 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { { // 使用正則去匹配 test: /\.styl$/, /* use: ExtractTextPlugin.extract({ fallback: { loader: 'style-loader' }, use: [ { loader: 'css-loader', options: {} }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('postcss-cssnext')(), require('cssnano')(), require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require('postcss-sprites')() ] } }, { loader: 'stylus-loader', options: {} } ] }) */ use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: {} }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('postcss-cssnext')(), require('cssnano')(), require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propWhiteList: [] }), require('postcss-sprites')() ] } }, { loader: 'stylus-loader', options: {} } ] }, { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'happypack/loader?id=css-pack' ] /* use: ExtractTextPlugin.extract({ use: ['happypack/loader?id=css-pack'] }) */ } }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' }) ] }
因此webpack.config.js 所有程式碼如下：
const path = require('path');
// 提取css的外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入 mini-css-extract-plugin 外掛
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 清除dist目錄下的檔案
const ClearWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
// 引入HappyPack外掛
const HappyPack = require('happypack');
module.exports = {
// 入口檔案
entry: {
main: './js/main.js',
demo1: './js/demo1.js'
},
output: {
filename: '[name].[chunkhash].js',
// 將輸出的檔案都放在dist目錄下
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
// 使用正則去匹配
test: /\.styl$/,
/*
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader'
},
use: [
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
})
*/
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'happypack/loader?id=css-pack'
]
/*
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=css-pack']
})
*/
},
{
test: /\.(png|jpg)$/,
/*
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]'
}
*/
use: ['happypack/loader?id=image']
},
{
test: /\.js$/,
// 將對.js檔案的處理轉交給id為babel的HappyPack的實列
use: ['happypack/loader?id=babel'],
// loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除檔案
}
]
},
resolve: {
extensions: ['*', '.js', '.json']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
// contentBase: path.join(__dirname, "dist"),
port: 8081,
host: '0.0.0.0',
headers: {
'X-foo': '112233'
},
// hot: true,
inline: true,
// open: true,
overlay: true,
stats: 'errors-only'
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版檔案
}),
new ClearWebpackPlugin(['dist']),
/*
new ExtractTextPlugin({
// 從js檔案中提取出來的 .css檔案的名稱
filename: `[name].[contenthash:8].css`
}),
*/
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css'
}),
// 告訴webpack使用了哪些第三方庫程式碼
new DllReferencePlugin({
context: path.join(__dirname),
// jquery 對映到json檔案上去
manifest: require('./plugins/jquery.manifest.json')
}),
new DllReferencePlugin({
context: path.join(__dirname),
// echarts 對映到json檔案上去
manifest: require('./plugins/echarts.manifest.json')
}),
/**** 使用HappyPack例項化 *****/
new HappyPack({
// 用唯一的識別符號id來代表當前的HappyPack 處理一類特定的檔案
id: 'babel',
// 如何處理.js檔案，用法和Loader配置是一樣的
loaders: ['babel-loader']
}),
new HappyPack({
id: 'image',
loaders: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: '[name].[ext]'
}
}]
}),
// 處理styl檔案
new HappyPack({
id: 'css-pack',
loaders: ['css-loader']
}),
new webpack.HashedModuleIdsPlugin()
]
};
通過如上配置後，我們再打包一下看下如下所示：
當我修改main.js程式碼後，再進行打包，會生成檔案如下，如下圖所示：
現在我們繼續改下main.styl程式碼，繼續打包，看是否main.css的hash編碼的變化，如下圖所示
如上我們可以看到修改main.styl後，main.js程式碼的hash變化也發生變化了。
因此在打包js中，我們需要使用 contenthash 就可以了，配置檔案如下：
module.exports = { // 入口檔案 entry: { main: './js/main.js', demo1: './js/demo1.js' }, output: { filename: '[name].[contenthash].js', // 將輸出的檔案都放在dist目錄下 path: path.resolve(__dirname, 'dist') } }
因此webpack.config.js所有程式碼如下：
const path = require('path');
// 提取css的外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入 mini-css-extract-plugin 外掛
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 清除dist目錄下的檔案
const ClearWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
// 引入HappyPack外掛
const HappyPack = require('happypack');
module.exports = {
// 入口檔案
entry: {
main: './js/main.js',
demo1: './js/demo1.js'
},
output: {
filename: '[name].[contenthash].js',
// 將輸出的檔案都放在dist目錄下
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
// 使用正則去匹配
test: /\.styl$/,
/*
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader'
},
use: [
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
})
*/
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'happypack/loader?id=css-pack'
]
/*
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=css-pack']
})
*/
},
{
test: /\.(png|jpg)$/,
/*
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]'
}
*/
use: ['happypack/loader?id=image']
},
{
test: /\.js$/,
// 將對.js檔案的處理轉交給id為babel的HappyPack的實列
use: ['happypack/loader?id=babel'],
// loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除檔案
}
]
},
resolve: {
extensions: ['*', '.js', '.json']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
// contentBase: path.join(__dirname, "dist"),
port: 8081,
host: '0.0.0.0',
headers: {
'X-foo': '112233'
},
// hot: true,
inline: true,
// open: true,
overlay: true,
stats: 'errors-only'
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版檔案
}),
new ClearWebpackPlugin(['dist']),
/*
new ExtractTextPlugin({
// 從js檔案中提取出來的 .css檔案的名稱
filename: `[name].[contenthash:8].css`
}),
*/
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css'
}),
// 告訴webpack使用了哪些第三方庫程式碼
new DllReferencePlugin({
context: path.join(__dirname),
// jquery 對映到json檔案上去
manifest: require('./plugins/jquery.manifest.json')
}),
new DllReferencePlugin({
context: path.join(__dirname),
// echarts 對映到json檔案上去
manifest: require('./plugins/echarts.manifest.json')
}),
/**** 使用HappyPack例項化 *****/
new HappyPack({
// 用唯一的識別符號id來代表當前的HappyPack 處理一類特定的檔案
id: 'babel',
// 如何處理.js檔案，用法和Loader配置是一樣的
loaders: ['babel-loader']
}),
new HappyPack({
id: 'image',
loaders: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: '[name].[ext]'
}
}]
}),
// 處理styl檔案
new HappyPack({
id: 'css-pack',
loaders: ['css-loader']
}),
// new webpack.HashedModuleIdsPlugin()
]
};
webpack.config.js 程式碼如上配置，首先我們先打包完成後，檢視打包後的檔案如下：
當我們隨便改動下main.js檔案，可以看到如下對應main.js的hash編碼發生改動，如下程式碼檔案：
接著我們繼續改動下main.styl檔案中的程式碼，可以看到如下圖demo1.js和main.js的hash編碼並沒有改動，
只有main.css檔案的hash編碼發生改動了，如下圖所示：
