image.png
同一個目錄下多個都需要引入不需要重復(fù)引入用一個webpack的api一行代碼就可以實現(xiàn)
通過執(zhí)行require.context函數(shù)獲取一個特定的上下文,主要用來實現(xiàn)自動化導(dǎo)入模塊告喊,在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然后自動導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊
分析require.context
require.context函數(shù)接受三個參數(shù)
directory {String} -讀取文件的路徑
useSubdirectories {Boolean} -是否遍歷文件的子目錄
regExp {RegExp} -匹配文件的正則
語法: require.context(directory, useSubdirectories = false, regExp = /^.//);
上面的import就可以直接用
const modulesFiles = require.context('./modules', true, /\.js$/)
實現(xiàn)