webpack require every file in directory

Question

This is my file structure

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

What should I do if I want to load (inside main.js) every file in someDir without specifying the file names -

something like: require(./someDir/*.js) ?

score 49 · Accepted Answer · edited Jun 20 '20 at 09:12

49

Solution:

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

extra:

regex to match js but ignore test.js

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 02 '15 at 10:21

yonatanmn

1,590
1
15
21

1

I got an error when using this approach, any suggestion? Thanks. https://github.com/webpack/webpack/issues/1635 – Hao Nov 16 '15 at 15:42
@NickMcCurdy Isn't it the other way round? Webpack 1 and Webpack 2 [both](https://webpack.github.io/docs/context.html) [support this](https://webpack.js.org/guides/dependency-management/#require-context), but it wouldn't work without Webpack... or do I miss something here? – x-ray May 14 '17 at 20:40
Sorry I was totally wrong, this was webpack syntax I was unaware of. Deleting my comment. – Nick McCurdy May 14 '17 at 22:17
8

What's the ES6 version for this require? – dude Jul 04 '17 at 09:56
Does anyone know how you'd require multiple directories with this method? – JCraine Sep 22 '19 at 12:27

Tudor Ilisoi · Answer 2 · 2016-12-31T19:09:47.090

Yes, it is possible, even recursively in the folder hierarchy

Here's a sample:

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

And a live demo here (open up devtools to see the generated object)

http://www.webpackbin.com/Vy6AwkWrz

In your case the first line would be

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

Reference: https://webpack.github.io/docs/context.html#require-context

Just a heads up, those links are out of date – JCraine Aug 20 '19 at 00:02 — JCraine, Aug 20 '19 at 00:02

score 6 · Answer 3 · answered Dec 13 '15 at 15:17

6

One approach could be to create an index.js file in SomeDir location and in that file:

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

Then in main.js:

require('./SomeDir');

or

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

or even

import something from "./SomeDir";

answered Dec 13 '15 at 15:17

VyvIT

1,048
10
13

2

What's the difference between `req([])` and invoking `req` on each key like the accepted answer does? – Roman Starkov Apr 19 '16 at 12:42
2

`Uncaught Error: Cannot find module ''.` at the line `req([])`, why doesn't it work? – Yurii N. Feb 01 '17 at 11:06
@JianWeihang well this is 3yrs old, apis change.. it worked with webpack 1 and 2 if I remember correctly. – VyvIT Jun 28 '18 at 09:31

score 0 · Answer 4 · answered Dec 04 '21 at 06:31

Webpack5 cause "webpack-context-dup-keys" Solution here We have to use below /./.*.md$/ e.g.

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

Please look at issue here

webpack require every file in directory

4 Answers4

Solution:

extra:

Linked

Related