webpack中如何加載靜態(tài)文件的方法步驟
前言:
對(duì)于非靜態(tài)的文件，如js，當(dāng)webpack打包時(shí)，會(huì)被直接打到模塊文件中，如main.js，如果修改了，需要再次編譯
而對(duì)于靜態(tài)文件，如jpg，svg等，我們不希望webpack去打包，只需要在build完后，直接放到dist下的某個(gè)路徑下即可，隨時(shí)可以修改，并不需要再次編譯
首先，看一段很熟悉的webpack配置
{
test: [/\.jpg/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[ext]',
},
}
它表明，在解析jpg文件時(shí)，只需要提供一個(gè)url即可，bytes小于10000的轉(zhuǎn)為base64。 此url為static/media/xxx.jpg。
注意：此處的url已經(jīng)不是 項(xiàng)目文件夾結(jié)構(gòu)的那個(gè)url(如src/assets/image/xxx.jpg), 而是 static/media/xxx.jpg，當(dāng)編譯后，dist/static/media中會(huì)出現(xiàn) xxx.jpg
那么我們?nèi)绾卧诮M件中引入靜態(tài)資源呢？
有兩張方式:
1、在組件最上方，使用import導(dǎo)入
import b from "@/assets/image/a.jpg" //此時(shí) b 的值為 static/media/a.jpg
在組件中
<img src=/>
2、使用require導(dǎo)入
如果不在組件上方使用import導(dǎo)入，而是在組件中的任意位置使用時(shí)，可通過(guò)require引入
<img src={require("@/assets/image/a.jpg")}>
//此時(shí)require("@/assets/image/a.jpg")的值就是static/media/a.jpg
那么同理，如果想讓markdown等其他文件，也成為靜態(tài)資源。
第一步:
{
test: [/\.md/],
loader: require.resolve('url-loader'),
options: {
limit: 10, //可以設(shè)置小點(diǎn)
name: 'static/media/[name].[ext]',
},
}
第二步:
//md文件和jpg不同，我們需要的最終是md文件的內(nèi)容，不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
//res.data 就是內(nèi)容
})
然后部署上去后，如果后期我們需要對(duì)map.md做修改，則直接修改static/media/map.md文件就行了，直接生效，不需要再次編譯
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)于js的一些常見(jiàn)事件的總結(jié)2008-12-12
本文主要介紹了javascript 正則表達(dá)式去空行方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
YUI Compressor壓縮JavaScript原理及微優(yōu)化
最近寫一個(gè)jQuery插件，在最后完成優(yōu)化時(shí)，對(duì)比發(fā)現(xiàn)壓縮后文件比較大，就思考那些是可以被修改和優(yōu)化的，發(fā)現(xiàn)壓縮原理也有很大的空間可以學(xué)習(xí)2013-01-01
地圖服務(wù)是指可以提供數(shù)據(jù)信息的接口，比如說(shuō)本地搜索/路線規(guī)劃等，下面介紹下百度地圖API之本地搜索與范圍搜索的相關(guān)知識(shí)，有需要的小伙伴可以來(lái)學(xué)習(xí)下2015-07-07
詳解JavaScript兩個(gè)實(shí)用的圖片懶加載優(yōu)化方法
本文主要介紹了JavaScript兩個(gè)實(shí)用的圖片懶加載優(yōu)化方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文將提供php版的JavaScript裁剪圖片代碼，僅供大家參考2012-11-11
這篇文章主要介紹了Javascript Promise用法詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
使用layui實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)的方法
今天小編就為大家分享一篇使用layui實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)非常棒的彈出div，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-10-10
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03