如何使用webpack加载目录中的所有文件而不使用require语句

Question

我有大量的javascript文件分成我的应用程序中的4个子目录.在grunt中,我抓住所有这些并将它们编译成一个文件.这些文件没有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

在我的app文件中,我最终提出了要求

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

感谢这篇文章:https://github.com/webpack/webpack/issues/118

它现在正在添加我的所有文件.我有一个html和css的加载器,它似乎工作得很好.

Answer 3

一个文件夹中所有文件的映射怎么样？

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