entry-loader

Based on https://github.com/sleexyz/dir-loader

dir-loader lets you dynamically require a directory in webpack.

In other words, dir-loader is a code-generation tool; it obviates the need to hard-code require's for a given directory's modules and subdirectories.

contents

• install
• use
• api
• examples
• alternatives

install

npm install --save-dev dir-loader

use

Suppose you have a webpack project with a semantic directory structure. You want to require your content but still preserve the hierarchical information inherent to the filesystem.

.
├── website
│   ├── intro.md
|   |
│   ├── travel
│   │   ├── post1.md
│   │   ├── post2.md
│   │   └── post3.md
|   |
│   ├── food
│   │   └── post1.md
|   |
│   └──ignore-me.js
|
|
|
├── blog.config.js
└── entry.js

In a js file, specify the configuration for dir-loader:

// ./blog.config.js

module.exports = {
  path: "./website",
  filter: /\.md$/
}

And then just require that configuration with dir! in your application code!

// ./entry.js

var blog = require("dir!./blog.config.js");
...

This is equivalent to the following javascript:

// (equivalent to ./entry.js)

var blog = {
  "food": require("./website/food/post1.md"),
  "intro.md": require("./website/intro.md"),
  "travel": require("./website/travel/post1.md")
};
...

api

// ./entry.js
var blog = require("dir!./blog.config.js");
...

// ./blog.config.js

module.exports = {

  // path :: String
  // Path to directory. Can be absolute or relative path.
  path: "./website",
  
  // filter :: RegExp
  // (optional)
  // Regular expression to test entry filenames.
  filter: /\.md$/,
  
  // dirFilter :: RegExp
  // (optional)
  // Regular expression to test directory names.
  dirFilter: /^(?!__private__).*/,
  
  // pathTransform :: (String) -> String
  // (optional)
  // Function to transform each generated require statement.
  pathTransform: (_) => "bundle!" + _
  
}

examples

Code here.

To run it:

git clone https://github.com/sleep/dir-loader
cd dir-loader
npm install
npm run example

alternatives

dir-loader was created due to insuffciencies with require.context, webpack's built-in solution for dynamic requires.

require.context provides a flat array of matched modules. This is the easiest way to dynamically require modules if your modules are non-hierarchical. But in the case you want to use the hierarchical information implicit in the filesystem structure, require.context falls short.