關於webpack require.context() 的那點事

先說

webpack裏面有這麼一招：使用require.context()方法來自動導入模塊

官方文檔有點深奧，老衲百度下拿了一段來直接使用，可是想看下它是如何運行的

本篇這裏不會有太深刻的研究，只是用一種解讀方式更有助於理解它的原理

老衲使用的是隨便vue項目的vuex改造來作例子

咱們這裏只研究require.context()怎麼回事，不是講解vuex怎麼改造。

開始

先建這麼個目錄結構，裏面2個模塊：

模塊裏隨便導出點東西，咱們就用簡單的對象：

在store.js中，而後咱們抄了段代碼是這樣子的：

固然是先看輸出結果，是這樣子的：

這樣，就成功讀取了咱們2個文件內導出的模塊對象

研究

上面的代碼可能有點玄乎，咱們來改造下，拆解成最土的代碼以便理解，好比這樣子：

require.context()運行後，返回的是一個函數，把rcfn打印出來：

能夠點擊它（使用chrome），進入這個函數內部，看到這麼些東西：

下面的模塊向外暴露出webpackContext方法

這個方法有一個參數，返回了使用__webpack_require__方法加載的模塊

而且webpackContext還有一個keys屬性，是一個方法，返回了上面map對象的key

也就是咱們上面例子調用時，modules目錄下面的文件+路徑名

因此很清楚了，代碼中咱們使用const moduleKeys = rcfn.keys()，來獲得文件名數組：

新建一個空數組，遍歷上面那個獲得的文件名+路徑數組，帶入最開始require.context()返回的方法rcfn

上面提到，這個返回的方法，其實內部就是返回引用__webpack_require__來加載模塊

這樣，咱們獲得了modules數組，裏面就是2個元素，每一個元素裏面有咱們導出的默認模塊

使用map過濾一下：

解散

總結 require.context() 用法就是 遍歷目錄下的文件名，再用文件名來加載文件中的模塊。

改造

仍是發一下吧。。直接上代碼

export default new Vuex.Store({    modules: {        ...(r => {             return r.keys().reduce((c, n) => {                 c[n.match(/(?<=\/).*?(?=\.js)/gi)]=r(n).default                return c            }, [])        })( require.context('./modules/', true, /\.js$/) )    }})複製代碼

用一個當即執行函數，傳入require.context()反回的方法

獲取到文件名map並使用reduce遍歷，按文件名做爲key，取得模塊，推入數組（這裏不使用push,使用key值，居然也能夠。。），並返回

最後是這麼一個數組，用...展開便可

這裏使用正則去掉不要的字符，那奇怪的正則語法叫正向前瞻和正向後瞻，相關資料本身百度