vue-cli3中配置alias和打包加hash值操作
1.之前在項(xiàng)目測(cè)試環(huán)境打包的時(shí)候，js文件打包出來沒有hash值，但是生產(chǎn)環(huán)境打包出來卻又hash值
當(dāng)時(shí)只配置了 filenameHashing: true，這樣是不夠的
后來在chainWebpack中配置config.output.filename('[name].[hash].js').end()，解決了該問題
2.配置alias可以在引入文件的時(shí)候不用寫很長(zhǎng)的相對(duì)路徑
步驟：
先引入path模塊
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
之后在chainWebpack中設(shè)置
chainWebpack(config) {
config.resolve.alias
.set('style', resolve('public/style'))
.set('api', resolve('src/api'))
.set('tools', resolve('src/tools'))
.set('components', resolve('src/components'))
.set('echarts', resolve('src/echarts'))
.set('echarts', resolve('node_modules/echarts'))
config.output.filename('[name].[hash].js').end();
},
補(bǔ)充知識(shí)：以vue-cli為例，了解webpack的hash、chunkhash、contenthash
hash
[hash] is replaced by the hash of the compilation（）. 代表的是cpmpilation的hash。
compilation在項(xiàng)目中任何一個(gè)文件改動(dòng)后就會(huì)被重新創(chuàng)建，然后webpack計(jì)算新的compilation的hash值，這個(gè)hash值便是hash。
chunkhash
[chunkhash] is replaced by the hash of the chunk. chunk（模塊）的hash
代表的是chunk(模塊)的hash值。
contenthash
插件extract-text-webpack-plugin引入的contenthash
| 名稱 | 說明 |
|---|---|
| hash | 代表的是compilation的hash值。compilation在項(xiàng)目中任何一個(gè)文件改動(dòng)后就會(huì)被重新創(chuàng)建，然后webpack計(jì)算新的compilation的hash值 |
| chunkhash | 代表chunk的hash,模塊發(fā)生改變才會(huì)重新生成hash |
| contenthash | 解決改變style文件導(dǎo)致js文件重新生成hash的問題(使用extract-text-webpack-plugin單獨(dú)編譯輸出css文件) |
vue-cli舉例
vue-cli腳手架中webpack的配置文件hash, build/webpack.base.conf.js
vue-cli中，hash用于圖片，音視頻，和字體文件
// hash(hash,jpg,mo4,txt)
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
})
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
chunkhash,build/webpack.prod.conf.js
chuunkhash主要用于js文件中
// chunkhash,js
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
contenthash：build/webpack.prod.conf.js
使用extract-text-webpack-plugin單獨(dú)編譯輸出css文件。extract-text-webpack-plugin提供了另外一種hash值：contenthash
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
至于緩存這一大塊的內(nèi)容，路漫漫，繼續(xù)學(xué)習(xí)
以上這篇vue-cli3中配置alias和打包加hash值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
在 Vue 3 中,v-bind?指令用于將表達(dá)式的值綁定到 DOM 元素的屬性上,這個(gè)指令的語(yǔ)法與 Vue 2 相同,但有一些細(xì)微的變化和改進(jìn),這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08
Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的詳細(xì)實(shí)例
在許多的后臺(tái)系統(tǒng)中少不了導(dǎo)出Excel表格的功能,下面這篇文章主要給大家介紹了關(guān)于Vue3.0導(dǎo)出數(shù)據(jù)為自定義樣式Excel的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了詳解Vue3?中的計(jì)算屬性及偵聽器，文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以看下一下2022-08-08
Vue自定義Hook實(shí)現(xiàn)簡(jiǎn)化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡(jiǎn)化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue使用nprogress實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實(shí)現(xiàn)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12