CODEWITHSUNDEEP
webpackwebpack-4
Marcus Junius Brutus
Marcus Junius Brutus

Reputation: 27296

How to require all files within a directory using webpack?

I am on webpack v4.

A number of libraries commonly ask a URL to some configuration or data file (that's part of the application's sources) to be provided at some API call. This is easily doable in webpack by require-ing the file in question (and having a file-loader configured).

I am now faced with a slightly different problem: a certain API requires the relative URL to some directory where a bunch of files will be found. What is the proper way to handle this in webpack? As far as I can tell, it is not possible to require an entire directory and there's no "directory-loader".

Upvotes: 1

Views: 2103

Answers (1)

sdgluck
sdgluck

Reputation: 27327

If you want to perform the require calls at compile-time, you can use require.context:

This can be useful if you want to require all files in a directory or matching a pattern.

Read the webpack docs for more information [1].

Example from the docs:

function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

[1] https://webpack.js.org/guides/dependency-management/#requirecontext

Upvotes: 2

Related Questions