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

I have a large amount of javascript files split into 4 subdirectory in my app. In grunt I grab all of them and compile them into one file. These files do not have a module.exports function.

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

I want to use webpack and split it into 4 parts. I don't want to manually go in and require all my files.

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

I would like to create a plugin that on compilation walks the directory trees, then grabs all the .js file names and paths, then requires all files in the sub directories and adds it to the output.

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

I want all the files in each directories compiled into a module that I could then require from my entry point file, or include in the assets that http://webpack.github.io/docs/plugins.html mentions.

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

When adding a new file I just want to drop it in the correct directory and know it will be included.

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

Is there a way to do this with webpack or a plugin that someone has written to do this?

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

5 个解决方案

#1

This is what I did to achieve this:

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

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

#2

In my app file I ended up putting the require

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

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

courtesy of this post: https://github.com/webpack/webpack/issues/118

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

It is now adding all my files. I have a loader for html and css and it seems to work great.

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

#3

How about a map of all the files in a folder?

文件夹中所有文件的地图怎么样？

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

Do this:

做这个：

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

#4

this works for me :

这对我有用：

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

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

NOTE: this can require .js files in subdirs of ./js/ recursively.

注意：这可能需要递归地./js/子目录中的.js文件。

#5

Example of how to get a map of all images in the current folder.

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

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));

#1