image.png

同一個(gè)目錄下多個(gè)都需要引入不需要重復(fù)引入用一個(gè)webpack的api一行代碼就可以實(shí)現(xiàn)
通過(guò)執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,主要用來(lái)實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊，在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后自動(dòng)導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊
分析require.context

require.context函數(shù)接受三個(gè)參數(shù)

directory {String} -讀取文件的路徑

useSubdirectories {Boolean} -是否遍歷文件的子目錄

regExp {RegExp} -匹配文件的正則

語(yǔ)法: require.context(directory, useSubdirectories = false, regExp = /^.//);
上面的import就可以直接用

const modulesFiles = require.context('./modules', true, /\.js$/)

實(shí)現(xiàn)