溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
背景
最近筆者在工作中遇到了一個小需求：
要實現一個組件來播放幀圖片
這個需求本身不復雜，但是需要在組件中一次性引入十張圖片，就像下面這樣：
// 就是這么任性，下標從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'
作為一個有代碼潔癖的程序員，我是不允許這種重復性代碼存在滴，于是乎就嘗試有沒有什么簡單的方法。
方法一：繞過 webpack
由于筆者用的是 vue-cli 3，熟悉的小伙伴都知道，將圖片以固定的格式放在 public 文件夾下面，然后在代碼中直接以絕對路徑引入即可。這么做的話，就可以根據文件名構造一個 url 數組，簡單代碼如下：
const frames = []
_.times(10, v => {
frames.push(`/images/frame_${v}.png`)
})
// 然后你就得到 10個 url 的數組啦
此方法本身是 vue-cli 提供的一個 應急手段，它有幾個缺點：
方法二：require
由于 import 是靜態關鍵字，所以如果想要批量加載文件，可以使用 require，但是直接像下面這樣寫是不行的：
const frames = []
_.times(10, v => {
const path = `./assets/images/frame_${v}.png`
frames.push(require(path))
}
上面的代碼中的 path 是在程序運行時才能確定的，即屬于 runtime 階段，而 webpack 中的 require 是在構建階段確定文件位置的，所以 webpack 沒法推測出這個 path 在哪里。
但是卻可以這樣寫：
const frames = []
_.times(10, v => {
frames.push(require(`./assets/images/frame_${v}.png`))
}
// frames 中就得到 帶 hash 值的路徑
雖然這兩種寫法在語法上沒有差別，但是第二種寫法在構建時提示了 webpack，webpack 會將 ./assets/images 中的所有文件都加入到 bundle 中，從而在你運行時可以找到對應的文件。
在使用方法二的時候筆者嘗試將批量加載的邏輯提取到其他模塊用來復用：
export function loadAll (n, prefix, suffix) {
const frames = []
_.times(n, v => {
frames.push(require('./' + prefix + v + suffix))
})
return frames
}
但是顯然失敗了，因為提取后的代碼，運行的 context 屬于另一個模塊，所以也就無法找到相對路徑中的文件。
方法三：require.context
上面兩種方法都不算很優雅，于是就去翻 webpack 的文檔，終于，讓我找到了這么一個方法：require.context
require.context( directory: String, includeSubdirs: Boolean /* 可選的，默認值是 true */, filter: RegExp /* 可選的，默認值是 /^\.\/.*$/，所有文件 */, mode: String /* 可選的，'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默認值是 'sync' */ )
指定一系列完整的依賴關系，通過一個 directory 路徑、一個 includeSubdirs 選項、一個 filter 更細粒度的控制模塊引入和一個 mode 定義加載方式。然后可以很容易地解析模塊.
我們還是看上面的例子：
const frames = []
const context = require.context('./assets/images', false, /frame_\d+.png/)
context.keys().forEach(k => {
frames.push(context(k))
})
這里的代碼通過 require.context 創建了一個 require 上下文。
然后使用 context.keys() 就能拿到該上下文的文件路徑列表，而 context 本身也是一個方法，相當于設置過上下文的 require，我們將 require 后的文件放入數組中，數組中的路徑其實是帶 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"]
而且如果設置過內聯圖片的話，數組中可能還有圖片的 base64 串。
重構一下
方法三已經解決了我們的問題，而且可以批量 require 某個文件夾中的文件。但是 forEach 那塊的邏輯明顯是重復的，所以我們當然提取出來啦，以后多個組件調用的時候只需要引入即可：
公共模塊：
/**
* 批量加載幀圖片
* @param {Function} context - require.context 創建的函數
* @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)
大功告成！感興趣的小伙伴可以點擊文末鏈接查看詳細文檔~
參考鏈接
require.context
webpack dynamic require
到此這篇關于webpack 動態批量加載文件的實現方法的文章就介紹到這了,更多相關webpack 動態批量加載文件內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
