剛開始使用webpack時，可能很多人都會有過這樣的想法，在require文件時，能不能不寫靜態(tài)的字符串路徑，而是使用一個更靈活的方式，比如定義一個變量，根據(jù)具體的運行情況來確定需要require哪個文件！

比如，筆者就遇到了一個這樣的需求。

當時是使用vue-router開發(fā)一個管理系統(tǒng)，管理系統(tǒng)自身有一個目錄數(shù)組，而vue-router也需要一個route配置數(shù)組，而這兩者恰恰是對應關系的。當時就想，能不能只維護一個目錄數(shù)組，然后動態(tài)的生成route數(shù)組呢？

于是我實現(xiàn)了一個小demo，如下：

// directorylet dir = [ { name: 'a', path: '/a', componentPath: './a.vue' }, {  ... }];let route = [];for (let i = 0; i < dir.length; ++i) { let item = dir[i]; route.push({ path: item.path, component: r => require.ensure([], () => r(require(item.componentPath)), 'demo') });}

大致如上，當時沒留源碼，大概手寫個例子，忽略一些可能的語法錯誤。

當使用這段代碼運行的時候，就開始報錯了：Critical dependencies。

在查了一些資料后，我大致明白了webpack的運行機制，也明白了一個事實，那就是：使用webpack動態(tài)require文件是不可能實現(xiàn)的。

要知道，webpack是一個打包工具，它運行的時機屬于預編譯，而我們的想法呢，要在運行時才能確定到底要require哪些文件，這顯然是不行的，因為這樣，webpack不知道該把哪些包打包起來，結果就是那些文件都沒有被打包進去，那么require也肯定require不到啊。

明白了這個機制，我們就應該確定直接傳遞path來動態(tài)注冊route是一種不可能實現(xiàn)的方案。

那么如果又想實現(xiàn)動態(tài)引入文件，怎么辦呢？我們可以考慮一些曲線救國的方案。

1. 預編譯階段確定require路徑。

我們之所以使用動態(tài)的變量來存儲路徑字符串，無非是想要程序替我們執(zhí)行一些動作，比如拼接字符串等等。那么很多情況下這些程序在運行時執(zhí)行和在預編譯時執(zhí)行是一樣效果的。比如我們上面的例子，就是不想手動去維護兩張表。那么我們可以在打包的時候，執(zhí)行讀寫文件，來動態(tài)執(zhí)行解析操作，并將解析得到的route數(shù)組寫入指定的文件。這樣不就實現(xiàn)了目標嗎？

2.直接傳遞component對象呢？比如下面的實現(xiàn)方式：

// directorylet dir = [ { name: 'a', path: '/a', component: r => require.ensure([], () => r(require('./a.vue')), 'demo')  }, {  ... }];let route = [];for (let i = 0; i < dir.length; ++i) { let item = dir[i]; route.push({ path: item.path, component: item.component });}

這種方案主要針對我們的例子，當然對其他情況也能給一個啟發(fā)作用。

不過說來說去，這都是委曲求全的方案，我們必須明白一點，那就是在預編譯階段，webpack必須明確知道該引入哪些文件，否則什么方案都是不可行的。

順便一提，網(wǎng)上還有說法require(path)，只要path不是純變量，比如require('./root/' + path)，這樣組合一下就行？我在這里require.ensure函數(shù)中嘗試過，不行。也許是我使用方式不對吧。

再一提，傳遞component對象時，好像在跨文件時會有點問題，反正我是將目錄數(shù)組和route數(shù)組以及解析過程寫在一個文件的。也許是使用相對路徑在不同文件中解析的問題，使用的時候需要注意下。

以上這篇webpack下實現(xiàn)動態(tài)引入文件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。