使用webpack載入目錄中的所有文件，無需使用require語句的方法

Question

我有大量的javascript檔案分散在我的應用程式的4個子目錄中。在grunt中，我將它們全部收集並編譯成一個檔案。這些檔案沒有module.exports函數。

我想要用webpack將它們分割成4個部分。我不想手動去引用所有的文件。

我想建立一個插件，在編譯時遍歷目錄樹，然後取得所有的.js檔案名稱和路徑，然後引用子目錄中的所有檔案並將其新增至輸出。

我希望每個目錄中的所有檔案都編譯成一個模組，然後可以從我的入口檔案中引用，或者包含在http://webpack.github.io/docs/plugins.html中提到的資源中。

當新增一個新檔案時，我只想將其放入正確的目錄中，並知道它將被包含。

是否有一種方法可以使用webpack或其他人編寫的插件來實現這個？

Answer 1

在我的應用程式檔案中，我最終放置了require

require.context(
  "./common", // 上下文文件夹
  true, // 包括子目录
  /.*/ // 正则表达式
)("./" + expr + "")

感謝這篇文章：https://github.com/webpack/webpack/issues/118

現在它正在添加所有我的文件。我有一個用於html和css的載入器，看起來運作得很好。

Answer 2

這是我為了實現這個目標所做的：

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));