如何使用webpack在不需要声明的情况下加载目录中的所有文件

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文件在我的app中被分成4个子目录。在grunt中，我将它们全部抓取并编译成一个文件。这些文件没有模块。出口函数。

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

在我的应用文件中，我最终提出了这个要求

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/es/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文件在subdirs ./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