webpack require every file in directory
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)
?
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)
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
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";