When building applications with webpack, importing modules statically is the standard approach. However, there are scenarios where you need to load multiple files dynamical based on certain patterns. This is where webpack's require.context comes into play.

The Problem with Manual Imports

Consider a typical component registration scenario where you need to import multiple components:

import Button from './components/Button'
import Input from './components/Input'
import Modal from './components/Modal'
import Dropdown from './components/Dropdown'

As your application grows, manually importing each module becomes tedious and error-prone. When addding new components, you must remember to write an import statement for each one.

Understanding require.context

Webpack provides a powerful feature called require.context that allows you to create a dynamic require function capable of matching files based on a regular expression.

require.context(directory, useSubdirectories, regExp)

Parameters:

• directory: The base directory to search for files
• useSubdirectories: A boolean flag indicating whether to include subdirectories
• regExp: A regular expression to filter which files to include

How It Works

When you call require.context, webpack analyzes the specified directory and creates a map of all matching files:

const context = require.context('./modules/', true, /\.js$/)

The returned object is not simply an array—it's a function with additional properties:

// Internal structure created by webpack
const contextMap = {
  "./UserService.js": "./src/modules/UserService.js",
  "./AuthService.js": "./src/modules/AuthService.js",
  "./PaymentService.js": "./src/modules/PaymentService.js"
}

// The context function
function resolveModule(request) {
  const moduleId = contextMap[request]
  if (!moduleId) {
    throw new Error(`Cannot find module '${request}'`)
  }
  return __webpack_require__(moduleId)
}

resolveModule.keys = () => Object.keys(contextMap)
resolveModule.resolve = (request) => contextMap[request]
resolveModule.id = "./src/modules/ sync recursive \\.js$"

module.exports = resolveModule

Available Methods

The context object provides three useful properties:

1. keys(): Returns an array of all matched file paths relative to the directory
2. resolve(request): Takes a relative path and returns the absolute module ID
3. id: A unique identifier for this context, useful for hot module replacement

Example usage:

const context = require.context('./utils/', true, /\.js$/)

console.log(context.keys())
// ["./formatter.js", "./validator.js", "./helper.js"]

Batch Loading Modules

Now you can dynamically load all matching modules:

const context = require.context('./services/', true, /\.js$/)

const modules = {}
context.keys().forEach(filename => {
  const moduleName = filename.replace(/^\.\//, '').replace(/\.js$/, '')
  modules[moduleName] = context(filename)
})

console.log(modules)
// { formatter: Module, validator: Module, helper: Module }

Practical Application

A common pattern is creating a reusable utility to handle batch imports:

const loadModules = (context, namespace = '') => {
  const registry = {}
  
  context.keys().forEach(rawPath => {
    const cleanPath = rawPath.replace(/^\.\//, '').replace(/\.js$/, '')
    const segments = cleanPath.split('/')
    const moduleName = namespace 
      ? `${namespace}/${segments[segments.length - 1]}`
      : segments.join('.')
    
    registry[moduleName] = context(rawPath)
  })
  
  return registry
}

export { loadModules }

Usage:

import { loadModules } from './utils/loader'
import allServices from './services/loader'

const services = loadModules(
  require.context('./services/', true, /\.js$/)
)

Use Cases

require.context is particularly useful for:

• Auto-registering Vue or React components
• Loading all locale files for internationalization
• Importing all CSS or SCSS files in a directory
• Dynamically loading configuration files
• Building plugin systems that scan directories for modules

Important Considerations

Keep in mind that require.context is a webpack-sepcific feature and won't work in Node.js environments without additional configuration. The files matched are resolved at build time, so the directory must exist and contain matching files for the build to succeed.

Also, be cautious with the regex pattern—overly broad matches can include unintended files and increase bundle size.