webpack中如何加載靜態(tài)文件的方法步驟
前言:
對于非靜態(tài)的文件，如js，當webpack打包時，會被直接打到模塊文件中，如main.js，如果修改了，需要再次編譯
而對于靜態(tài)文件，如jpg，svg等，我們不希望webpack去打包，只需要在build完后，直接放到dist下的某個路徑下即可，隨時可以修改，并不需要再次編譯
首先，看一段很熟悉的webpack配置
{
test: [/\.jpg/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[ext]',
},
}
它表明，在解析jpg文件時，只需要提供一個url即可，bytes小于10000的轉(zhuǎn)為base64。 此url為static/media/xxx.jpg。
注意：此處的url已經(jīng)不是 項目文件夾結(jié)構(gòu)的那個url(如src/assets/image/xxx.jpg), 而是 static/media/xxx.jpg，當編譯后，dist/static/media中會出現(xiàn) xxx.jpg
那么我們?nèi)绾卧诮M件中引入靜態(tài)資源呢？
有兩張方式:
1、在組件最上方，使用import導入
import b from "@/assets/image/a.jpg" //此時 b 的值為 static/media/a.jpg
在組件中
<img src=/>
2、使用require導入
如果不在組件上方使用import導入，而是在組件中的任意位置使用時，可通過require引入
<img src={require("@/assets/image/a.jpg")}>
//此時require("@/assets/image/a.jpg")的值就是static/media/a.jpg
那么同理，如果想讓markdown等其他文件，也成為靜態(tài)資源。
第一步:
{
test: [/\.md/],
loader: require.resolve('url-loader'),
options: {
limit: 10, //可以設(shè)置小點
name: 'static/media/[name].[ext]',
},
}
第二步:
//md文件和jpg不同，我們需要的最終是md文件的內(nèi)容，不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
//res.data 就是內(nèi)容
})
然后部署上去后，如果后期我們需要對map.md做修改，則直接修改static/media/map.md文件就行了，直接生效，不需要再次編譯
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript的this關(guān)鍵字，真正幫助大家做到精通this關(guān)鍵字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法,實例分析了oninput與onpropertychange實現(xiàn)下拉框里自動匹配關(guān)鍵字實時監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了mpvue實現(xiàn)微信小程序快遞單號查詢，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào)示例介紹
這篇文章主要介紹了Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了微信小程序 開發(fā)過程中遇到問題總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了VUE基于NUXT的SSR 服務端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了原生js實現(xiàn)each方法,需要的朋友可以參考下2019-05-05
擴展javascript的Date方法實現(xiàn)代碼(prototype)
長期從事C#的開發(fā)，被C#影響著我的思維。C#中DateTime的操作就很方便，于是就參考它對js的Date做了擴展。2010-11-11
解決OneThink中無法異步提交kindeditor文本框中修改后的內(nèi)容方法
下面小編就為大家?guī)硪黄鉀QOneThink中無法異步提交kindeditor文本框中修改后的內(nèi)容方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了json的結(jié)構(gòu)與遍歷方法,結(jié)合具體實例形式分析了json常見的簡單與復雜結(jié)構(gòu)表示方法,以及具體的遍歷操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04