欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack中如何加載靜態(tài)文件的方法步驟

 更新時(shí)間：2019年05月18日 13:45:17   作者：小李子的一天  
這篇文章主要介紹了webpack中如何加載靜態(tài)文件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言:

對(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í)，可通過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)文章

最新評(píng)論