如何在不使用require语句的情况下使用webpack加载目录中的所有文件

Question

我的应用程序中有大量的javascript文件分成4个子目录。不好意思，我抓住了所有这些文件，并将它们编译成一个文件。这些文件没有module.exports函数。我想使用webpack并将其分为4部分。我不想手动输入所有文件。我想创建一个插件，该插件在编译时会遍历目录树，然后获取所有.js文件名和路径，然后要求子目录中的所有文件并将其添加到输出中。我希望将每个目录中的所有文件编译成一个模块，然后可以从我的入口点文件中将其要求，或者包含在http://webpack.github.io/docs/plugins.html提及的资产中。添加新文件时，我只想将其放置在正确的目录中，并且知道它会包含在内。有没有办法使用webpack或有人编写的插件来做到这一点？

Answer 1

这是我为实现这一目标所做的：

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

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

Answer 2

文件夹中所有文件的映射如何？

// { 

//   './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, /.*/));