CODEWITHSUNDEEP
pluginscode-generationwebpack
Shane Brinkman-Davis
Shane Brinkman-Davis

Reputation: 699

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

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:

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.

Upvotes: 6

Views: 3036

Answers (1)

Christian Ulbrich
Christian Ulbrich

Reputation: 3574

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;

Upvotes: 1

Related Questions