How to load all files in a directory using webpack without require statements How to load all files in a directory using webpack without require statements javascript javascript

How to load all files in a directory using webpack without require statements


This is what I did to achieve this:

function requireAll(r) { r.keys().forEach(r); }requireAll(require.context('./modules/', true, /\.js$/));


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

It is now adding all my files. I have a loader for html and css and it seems to work great.


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, /.*/));