vue-cli3中配置alias和打包加hash值操作
1.之前在項(xiàng)目測試環(huán)境打包的時候，js文件打包出來沒有hash值，但是生產(chǎn)環(huán)境打包出來卻又hash值
當(dāng)時只配置了 filenameHashing: true，這樣是不夠的
后來在chainWebpack中配置config.output.filename('[name].[hash].js').end()，解決了該問題
2.配置alias可以在引入文件的時候不用寫很長的相對路徑
步驟：
先引入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ǔ)充知識：以vue-cli為例，了解webpack的hash、chunkhash、contenthash
hash
[hash] is replaced by the hash of the compilation（）. 代表的是cpmpilation的hash。
compilation在項(xiàng)目中任何一個文件改動后就會被重新創(chuàng)建，然后webpack計(jì)算新的compilation的hash值，這個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)目中任何一個文件改動后就會被重新創(chuàng)建，然后webpack計(jì)算新的compilation的hash值 |
| chunkhash | 代表chunk的hash,模塊發(fā)生改變才會重新生成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值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router如何實(shí)現(xiàn)路由懶加載
在現(xiàn)代前端開發(fā)中,Vue.js憑借其輕量級和易用性,成為了很多開發(fā)者的首選框架,本文將結(jié)合實(shí)際案例,詳細(xì)講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法
這篇文章主要介紹了vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
這篇文章主要介紹了Vue實(shí)現(xiàn)剪切板圖片壓縮功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼
這篇文章主要介紹了vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼,需要的朋友可以參考下2024-08-08
項(xiàng)目開發(fā)中需要做一個輪詢,所以將實(shí)現(xiàn)的過程記錄了一下,下面這篇文章主要給大家介紹了關(guān)于vue輪詢解決方案的相關(guān)資料,需要的朋友可以參考下2021-07-07
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue-router定義元信息meta操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
Vue.js中使用iView日期選擇器并設(shè)置開始時間結(jié)束時間校驗(yàn)功能
本文通過實(shí)例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時間結(jié)束時間校驗(yàn)功能,需要的朋友可以參考下2018-08-08
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03