快捷導(dǎo)航

webpack 動態(tài)批量加載文件的實現(xiàn)方法

更新時間：2020年03月19日 09:46:55 作者：savokiss

這篇文章主要介紹了webpack 動態(tài)批量加載文件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

最近筆者在工作中遇到了一個小需求：

要實現(xiàn)一個組件來播放幀圖片

這個需求本身不復(fù)雜，但是需要在組件中一次性引入十張圖片，就像下面這樣：

// 就是這么任性，下標(biāo)從0開始~
import frame0 from './assets/frame_0.png'
import frame1 from './assets/frame_1.png'
import frame2 from './assets/frame_2.png'
// ..省略n張
import frame7 from './assets/frame_8.png'
import frame8 from './assets/frame_9.png'
import frame9 from './assets/frame_10.png'

作為一個有代碼潔癖的程序員，我是不允許這種重復(fù)性代碼存在滴，于是乎就嘗試有沒有什么簡單的方法。

方法一：繞過 webpack

由于筆者用的是 vue-cli 3，熟悉的小伙伴都知道，將圖片以固定的格式放在 public 文件夾下面，然后在代碼中直接以絕對路徑引入即可。這么做的話，就可以根據(jù)文件名構(gòu)造一個 url 數(shù)組，簡單代碼如下：

const frames = []
_.times(10, v => {
  frames.push(`/images/frame_${v}.png`)
})
// 然后你就得到 10個 url 的數(shù)組啦

此方法本身是 vue-cli 提供的一個應(yīng)急手段，它有幾個缺點：

無法利用 webpack 處理資源，無法產(chǎn)生內(nèi)容哈希，不利于緩存更新
無法利用 url-loader 將資源內(nèi)聯(lián)成 base64 字符串以減少網(wǎng)絡(luò)請求

方法二：require

由于 import 是靜態(tài)關(guān)鍵字，所以如果想要批量加載文件，可以使用 require，但是直接像下面這樣寫是不行的：

const frames = []
_.times(10, v => {
  const path = `./assets/images/frame_${v}.png`
  frames.push(require(path))
}

上面的代碼中的 path 是在程序運行時才能確定的，即屬于 runtime 階段，而 webpack 中的 require 是在構(gòu)建階段確定文件位置的，所以 webpack 沒法推測出這個 path 在哪里。

但是卻可以這樣寫：

const frames = []
_.times(10, v => {
  frames.push(require(`./assets/images/frame_${v}.png`))
}
// frames 中就得到 帶 hash 值的路徑

雖然這兩種寫法在語法上沒有差別，但是第二種寫法在構(gòu)建時提示了 webpack，webpack 會將 ./assets/images 中的所有文件都加入到 bundle 中，從而在你運行時可以找到對應(yīng)的文件。

在使用方法二的時候筆者嘗試將批量加載的邏輯提取到其他模塊用來復(fù)用：

export function loadAll (n, prefix, suffix) {
 const frames = []
 _.times(n, v => {
  frames.push(require('./' + prefix + v + suffix))
 })
 return frames
}

但是顯然失敗了，因為提取后的代碼，運行的 context 屬于另一個模塊，所以也就無法找到相對路徑中的文件。

方法三：require.context

上面兩種方法都不算很優(yōu)雅，于是就去翻 webpack 的文檔，終于，讓我找到了這么一個方法：require.context

require.context(
 directory: String,
 includeSubdirs: Boolean /* 可選的，默認(rèn)值是 true */,
 filter: RegExp /* 可選的，默認(rèn)值是 /^\.\/.*$/，所有文件 */,
 mode: String /* 可選的，'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默認(rèn)值是 'sync' */
)

指定一系列完整的依賴關(guān)系，通過一個 directory 路徑、一個 includeSubdirs 選項、一個 filter 更細(xì)粒度的控制模塊引入和一個 mode 定義加載方式。然后可以很容易地解析模塊.

我們還是看上面的例子：

const frames = []
const context = require.context('./assets/images', false, /frame_\d+.png/)
context.keys().forEach(k => {
  frames.push(context(k))
})

這里的代碼通過 require.context 創(chuàng)建了一個 require 上下文。

第一個參數(shù)指定了需要加載的文件夾，即組件當(dāng)前目錄下的 ./assets/images 文件夾
第二個參數(shù)指定是否需要包含子目錄，由于沒有子目錄，所以傳 false
第三個參數(shù)指定需要包含的文件的匹配規(guī)則，我們用一個正則表示

然后使用 context.keys() 就能拿到該上下文的文件路徑列表，而 context 本身也是一個方法，相當(dāng)于設(shè)置過上下文的 require，我們將 require 后的文件放入數(shù)組中，數(shù)組中的路徑其實是帶 hash 值的，如下是我項目中的圖片：

["/static/img/frame_0.965ef86f.png", "/static/img/frame_1.c7465967.png", "/static/img/frame_2.41e82904.png", "/static/img/frame_3.faef7de9.png", "/static/img/frame_4.27ebbe45.png", "/static/img/frame_5.d98cbebe.png", "/static/img/frame_6.c10859bc.png", "/static/img/frame_7.5e9cbdf0.png", "/static/img/frame_8.b3b92c71.png", "/static/img/frame_9.36660295.png"]

而且如果設(shè)置過內(nèi)聯(lián)圖片的話，數(shù)組中可能還有圖片的 base64 串。

重構(gòu)一下

方法三已經(jīng)解決了我們的問題，而且可以批量 require 某個文件夾中的文件。但是 forEach 那塊的邏輯明顯是重復(fù)的，所以我們當(dāng)然提取出來啦，以后多個組件調(diào)用的時候只需要引入即可：

公共模塊：

/**
 * 批量加載幀圖片
 * @param {Function} context - require.context 創(chuàng)建的函數(shù)
 * @returns {Array<string>} 返回的所有圖片
 */
function loadFrames (context) {
 const frames = []
 context.keys().forEach(k => {
  frames.push(context(k))
 })
 return frames
}

組件中：

const context = require.context('./assets/images', false, /frame_\d+.png/)
const frames = loadFrames(context)

大功告成！感興趣的小伙伴可以點擊文末鏈接查看詳細(xì)文檔~

參考鏈接
require.context
webpack dynamic require

到此這篇關(guān)于webpack 動態(tài)批量加載文件的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)webpack 動態(tài)批量加載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

webpack 動態(tài)批量加載文件的實現(xiàn)方法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具