Webpack需要导入目录中的每个文件

Question

这是我的文件结构

-main.js
-SomeDir
   -fileA.js
   -fileB.js

如果我想在main.js文件中加载someDir目录下的每个文件，而不需要指定文件名，我该怎么办？

例如：require(./someDir/*.js)这样的写法是否可行？

- yonatanmn

Answer 1

解决方案：

var req = require.context("../someDir", true, /^(.*\.(js$))[^.]*$/igm);
req.keys().forEach(function(key){
    req(key);
});
// or just: req.keys().forEach(req)

额外内容:

正则表达式匹配js但忽略test.js

/^(?!.*test.js)((.*\.(js\.*))[^.]*$)/igm)

- yonatanmn

---

我在使用这种方法时遇到了一个错误，有什么建议吗？谢谢。https://github.com/webpack/webpack/issues/1635 - Hao

@NickMcCurdy 难道不应该反过来吗？Webpack 1和Webpack 2都支持这个功能，但没有Webpack，它是行不通的...或者我这里漏掉了什么？ - x-ray

抱歉，我完全错了，这是我不知道的webpack语法。删除我的评论。 - Nick McCurdy

这个 require 的 ES6 版本是什么？ - dude

有人知道如何使用这种方法要求多个目录吗？ - JCraine

Answer 2

可以，即使在文件夹层次结构中也可以递归地实现。

这是一个示例：

var context = require.context('./', true, /\.(html)$/);
var files={};

context.keys().forEach((filename)=>{
  console.log(filename);
  files[filename] = context(filename);
});
console.log(files); //you have file contents in the 'files' object, with filenames as keys

这里有一个实时演示（打开开发者工具可以看到生成的对象）

http://www.webpackbin.com/Vy6AwkWrz

在你的情况下，第一行将是

var context = require.context('./SomeDir', false, /\.js$/);

参考文献：https://webpack.github.io/docs/context.html#require-context

- Tudor Ilisoi

---

注意，那些链接已经过时了。 - JCraine

Answer 3

一种方法是在SomeDir位置创建一个index.js文件，其中包含以下内容：

var req = require.context('./', true, /\.js$/);
req([]);

然后在main.js中：

require('./SomeDir');

或者

require('./SomeDir/index.js');

甚至更多

import something from "./SomeDir";

- VyvIT

---

req([]) 和像被接受的答案那样在每个键上调用 req 有什么区别？ - Roman Starkov

在req([])这一行出现了Uncaught Error: Cannot find module ''.的错误，为什么它不起作用？ - Yurii N.

@JianWeihang 这是3年前的内容了，API已经改变了.. 如果我没记错的话，它可以在webpack 1和2中工作。 - VyvIT

Answer 4

Webpack5会导致"webpack-context-dup-keys"错误 这里有解决方案 我们必须使用/./.*.md$/ 例如：

 let ctxWrong   = require.context("../content/posts", true, /\.md$/);
 let ctxCorrect = require.context("../content/posts", true, /\.\/.*\.md$/); 

请查看此处问题

- Cloud Gem