如何加載使用的WebPack一個子目錄下的所有文件，而不需要聲明

我有大量的JavaScript文件在我的應用程序分成4個子目錄。在咕嚕聲中，我抓住所有這些文件並將它們編譯成一個文件。這些文件沒有module.exports功能如何加載使用的WebPack一個子目錄下的所有文件，而不需要聲明

我想使用的WebPack和它分成4個部分。我不想手動進入並需要我所有的文件。

我想創建一個可在編譯走在目錄樹，然後抓住所有的.js文件名和路徑插件，則需要在子目錄中的所有文件，並將其添加到輸出。

我希望將每個目錄中的所有文件編譯成一個模塊，然後我可以從我的入口點文件中請求該模塊，或者將其包含在http://webpack.github.io/docs/plugins.html提到的資產中。

當添加新的文件我只想砸在正確的目錄，並知道它會被包括在內。

有沒有辦法用的WebPack或插件，有人寫這樣做是爲了做到這一點？

來源

2015-04-02 ChickenFur

這是我做過什麼來實現這一目標：

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

來源

2015-06-04 19:08:17 splintor

有什麼方法可以指定要使用的裝載機？我的用例是我想爲所有圖像使用'image-size-loader'，以創建具有正確高寬比的佔位符。 – bobbaluba 2015-11-24 12:08:37

你能否爲你提供工作示例webpack.config.js – 2015-12-09 08:38:22

這對我來說非常合適。謝謝@splintor – 2016-03-22 15:37:36

在我的應用程序文件，我最終把需要

require.context(
    "./common", // context folder 
    true, // include subdirectories 
    /.*/ // RegExp 
)("./" + expr + "")

禮貌這個帖子：https://github.com/webpack/webpack/issues/118

它現在將我的所有文件。我有一個加載器的HTML和CSS，它似乎很好。

來源

2015-04-03 00:28:36 ChickenFur

+25

什麼是'在這個例子中expr'？ – twiz 2015-08-24 00:47:33

'expr'是上下文文件夾中單個文件的路徑。所以如果你需要這樣做，而不僅僅是要求所有的html文件，這是很有用的。 https://webpack.github.io/docs/context.html#context-module-api – mkoryak 2015-09-30 22:23:54

+15

即使在查看webpack文檔之後，我仍然不清楚基於'expr'的參數在做什麼。「這不僅僅是爲了要求所有的HTML文件」是什麼意思？謝謝 – mikkelrd 2015-10-16 06:29:09

如何地圖文件夾中的所有文件？

// { 
// './image1.png': 'data:image/png;base64,iVBORw0KGgoAAAANS', 
// './image2.png': 'data:image/png;base64,iVBP7aCASUUASf892', 
// }

這樣做：

const allFiles = (ctx => { 
    let keys = ctx.keys(); 
    let values = keys.map(ctx); 
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {}); 
})(require.context('./path/to/folder', true, /.*/));

來源

2017-05-11 04:16:14

謝謝你放棄這個例子。我用map簡單地返回每個文件導出的值=）。 – 2017-07-26 06:46:47

這個工作對我來說：

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

注意：這需要遞歸./js/的子目錄.js文件。

來源

2017-10-07 15:13:25

如何加載使用的WebPack一個子目錄下的所有文件，而不需要聲明

回答

相關問題