How do I write a Webpack plugin to generate index.js files on demand?

Question

In general, I want to know how to do code-generation/fabrication in a Webpack plugin on demand. I want to generate contents for files that do not exist when they are "required."

Specifically, I want a plugin that, when I require a directory, automatically requires all files in that directory (recursively).

For example, suppose we have the directory structure:

• foo
  • bar.js
  • baz.js
• main.js

And main.js has:

var foo = require("./foo");
// ...

I want webpack to automatically generate foo/index.js:

module.exports = {
  bar: require("./bar"),
  baz: require("./baz")
};

I've read most of the webpack docs. github.com/webpack/docs/wiki/How-to-write-a-plugin has an example of generating assets. However, I can't find an example of how to generate an asset on demand. It seems this should be a Resolver, but resolvers seem to only output file paths, not file contents.

Answer 1

Actually for your use case:

Specifically, I want a plugin that, when I require a directory, automatically requires all files in that directory (recursively).

you don't need a plugin. See How to load all files in a subdirectories using webpack without require statements

Doing code-generation/fabrication on demand can be done in JavaScript quite easily, why would you restrict your code generation specifically to only applied, when "required" by WebPack?

As NodeJS itself will look for an index.js, if you require a directory, you can quite easily generate arbitrary exports:

//index.js generating dynamic exports
var time = new Date();

var dynamicExport = {
  staticFn : function() {
    console.log('Time is:', time);
  }
}

//dynamically create a function as a property in dynamicExport
//here you could add some file processing logic that is requiring stuff on demand and export it accordingly
dynamicExport['dyn' + time.getDay()] = function() {
  console.log('Take this Java!');
}

module.exports = dynamicExport;