如何加载使用的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一个子目录下的所有文件，而不需要声明

回答

相关问题