我在我的应用程序中有大量的 javascript 文件分成 4 个子目录。在 grunt 中，我抓取所有这些并将它们编译成一个文件。这些文件没有 module.exports 函数。
我想使用 webpack 并将其分成 4 部分。我不想手动进入并需要我的所有文件。
我想创建一个插件，在编译时遍历目录树，然后获取所有 .js 文件名和路径，然后需要子目录中的所有文件并将其添加到输出中。
我希望每个目录中的所有文件都编译成一个module，然后我可以从我的入口点文件中要求该module，或者包含在http://webpack.github.io/docs/plugins.html提到的资产中。
添加新文件时，我只想将其放入正确的目录中并知道它将被包含在内。
有没有办法用 webpack 或某人编写的插件来做到这一点？
这就是我为实现这一目标所做的：
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));
在我的应用程序文件中，我最终放置了要求
require.context(
"./common", // context folder
true, // include subdirectories
/.*/ // RegExp
)("./" + expr + "")
这篇文章的礼貌：https : //github.com/webpack/webpack/issues/118
它现在正在添加我的所有文件。我有一个 html 和 css 加载器，它似乎工作得很好。
一个文件夹中所有文件的映射怎么样？
// {
// './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, /.*/));
如何获取当前文件夹中所有图像的地图的示例。
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));
@splintor 的所有优点（谢谢）。
但这里是我自己的派生版本。
好处：
{module_name: exports_obj}对象下。
编辑：如果像我一样，你确定你的module除了（至少在根级别）一个常规的 javascript 对象之外不会返回任何东西，你也可以“挂载”它们复制它们的原始目录结构（参见代码（深度版本） )部分)。
代码（原版）：
function requireAll(r) {
return Object.fromEntries(
r.keys().map(function(mpath, ...args) {
const result = r(mpath, ...args);
const name = mpath
.replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
.replace(/\//g, '_') // Relace '/'s by '_'s
;
return [name, result];
})
);
};
const allModules = requireAll(require.context(
// Any kind of variables cannot be used here
'@models' // (Webpack based) path
, true // Use subdirectories
, /\.js$/ // File name pattern
));
例子：
最终的示例输出console.log(allModules);：
{
main: { title: 'Webpack Express Playground' },
views_home: {
greeting: 'Welcome to Something!!',
title: 'Webpack Express Playground'
}
}
目录树：
models
├── main.js
└── views
└── home.js
代码（深度版）：
function jsonSet(target, path, value) {
let current = target;
path = [...path]; // Detach
const item = path.pop();
path.forEach(function(key) {
(current[key] || (current[key] = {}));
current = current[key];
});
current[item] = value;
return target;
};
function requireAll(r) {
const gather = {};
r.keys().forEach(function(mpath, ...args) {
const result = r(mpath, ...args);
const path = mpath
.replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
.split('/')
;
jsonSet(gather, path, result);
});
return gather;
};
const models = requireAll(require.context(
// Any kind of variables cannot be used here
'@models' // (Webpack based) path
, true // Use subdirectories
, /\.js$/ // File name pattern
));
例子：
使用此版本的先前示例的结果：
{
main: { title: 'Webpack Express Playground' },
views: {
home: {
greeting: 'Welcome to Something!!',
title: 'Webpack Express Playground'
}
}
}