How to restrict Webpack `require.context` neatly?

Question

I am developing a little static site generator on top of Webpack and React. Currently I'm making it more dynamic. One part of this is making it more configurable.

Given a site structure like this

.
├── _book
├── assets
├── build
├── drafts
├── manuscript
├── node_modules
├── pages
├── project_source
└── styles

I would want to require files only from certain directory or directories. In this case it would be enough to require Markdown files from manuscript. Naively var req = require.context('manuscript', true, /^\.\/.*\.md$/) would work.

The problem is that this needs to become dynamic as I pass the directory through site generator configuration. As require.context relies on fixed values I think I need to change context to site root using something like var req = require.context('.', true, /^.*\.md$/) and then check against req.keys() to match against my configuration.

In practice this is extremely slow as it will traverse the whole tree! Especially node_modules can contain a lot of files and this is something that should be avoided at all costs.

Is there a neat way to exclude node_modules out of require.context? I suppose some form of Regex might work although I am open for other ideas.

Answer 1

You could try:

var req = require.context('.', true, /^((?![\\/]node_modules|vendor[\\/]).)*\.md$/);

to exclude paths containing node_modules and vendor folders from the match.