如何使用webpack加载目录中的所有文件而不使用require语句-Java 学习之路

我有大量的javascript文件分成我的应用程序中的4个子目录 . 在grunt中，我 grab 所有这些并将它们编译成一个文件 . 这些文件没有module.exports函数 .

我想使用webpack并将其拆分为4个部分 . 我不想手动进入并要求我的所有文件 .

我想创建一个插件，在编译时遍历目录树，然后获取所有.js文件名和路径，然后需要子目录中的所有文件并将其添加到输出中 .

我希望将每个目录中的所有文件编译成一个模块，然后我可以从我的入口点文件中获取该模块，或者包含在http://webpack.github.io/docs/plugins.html提及的资产中 .

添加新文件时，我只想将其放在正确的目录中，并知道它将被包含在内 .

有没有办法用webpack或插件来执行此操作？

5 回答

文件夹中所有文件的 Map 怎么样？

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

回复于 2024-04-20T19:01:59+08:00

90
这对我有用：
```
function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));
```
注意：这可能需要递归地./js/子目录中的.js文件 .
回复于 2024-04-20T19:01:59+08:00

如何获取当前文件夹中所有图像的 Map 的示例 .

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));

回复于 2024-04-20T19:01:59+08:00

这就是我为实现这一点所做的：

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

回复于 2024-04-20T19:01:59+08:00

38
在我的app文件中，我最终提出了要求
```
require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")
```
礼貌的帖子：https://github.com/webpack/webpack/issues/118

它现在正在添加我的所有文件 . 我有一个html和css的加载器，它似乎工作得很好 .
回复于 2024-04-20T19:01:59+08:00

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

5 回答

相关问题