国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack中如何加載靜態文件

hzx / 1450人閱讀

摘要:第一步可以設置小點第二步文件和不同,我們需要的最終是文件的內容,不是就是內容然后部署上去后,如果后期我們需要對做修改,則直接修改文件就行了,直接生效,不需要再次編譯

前言:
對于非靜態的文件,如js,當webpack打包時,會被直接打到模塊文件中,如main.js,如果修改了,需要再次編譯
而對于靜態文件,如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的轉為base64。 此url為static/media/xxx.jpg。
注意:此處的url已經不是 項目文件夾結構的那個url(如src/assets/image/xxx.jpg), 而是 static/media/xxx.jpg,當編譯后,dist/static/media中會出現 xxx.jpg

那么我們如何在組件中引入靜態資源呢?
有兩張方式:
1、在組件最上方,使用import導入

import b  from "@/assets/image/a.jpg"
//此時 b 的值為 static/media/a.jpg

在組件中


2、使用require導入
如果不在組件上方使用import導入,而是在組件中的任意位置使用時,可通過require引入


//此時require("@/assets/image/a.jpg")的值就是static/media/a.jpg

那么同理,如果想讓markdown等其他文件,也成為靜態資源。
第一步:

{
    test: [/.md/],
    loader: require.resolve("url-loader"),
    options: {
        limit: 10,  //可以設置小點
        name: "static/media/[name].[ext]",
    },
}

第二步:

//md文件和jpg不同,我們需要的最終是md文件的內容,不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
    //res.data 就是內容
})

然后部署上去后,如果后期我們需要對map.md做修改,則直接修改static/media/map.md文件就行了,直接生效,不需要再次編譯

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109619.html

相關文章

  • Web前端性能優化——如何有效提升靜態文件加載速度

    摘要:在減少文件請求數量方面大致有以下三方面合并腳本文件合并樣式文件合并引用的圖片,使用雪碧圖。和的模塊管理不同,前者是基于靜態的,而后者是動態的。被打包文件的內容也已經被壓縮混淆,減少了加載文件的。 作者:劉軼斌,騰訊應用開發 工程師商業轉載請聯系騰訊WeTest獲得授權,非商業轉載請注明出處。 原文鏈接:http://wetest.qq.com/lab/view/345.html We...

    ccj659 評論0 收藏0
  • 性能優化篇---Webpack構建代碼質量壓縮

    摘要:運行構建帶上可追蹤到的工作只能正確的分析出如何剔除死代碼,需要接入處理剔除配置見上開啟即作用域提升在構建過程中,會借助模塊化的靜態特性,確定模塊的依賴關系,將一個中的靜態依賴提升到頂部。 Webpack構建速度優化基本優化完畢,接下來考慮的就是:線上代碼質量的優化,即如何使用webpack構建出高質量的代碼 Webpack構建流程:初始化配置參數 -> 綁定事件鉤子回調 -> 確...

    KunMinX 評論0 收藏0
  • webpack多頁應用架構系列(十六):善用瀏覽器緩存,該去則去,該留則留

    摘要:瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存,以及為何我要在標題中強調該去則去,該留則留。但后來我還是反轉了自己,這種方法雖然能留下瀏覽器緩存,卻做不到該去則去。 本文首發于Array_Huang的技術博客——實用至上,非經作者同意,請勿轉載。原文地址:https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣,歡迎關注訂閱這里:h...

    pekonchan 評論0 收藏0

發表評論

0條評論

hzx

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<