如何编写Webpack插件来按需生成index.js文件？

Question

一般来说，我想知道如何按需在 Webpack 插件中进行代码生成/制作。我想为“需要”时不存在的文件生成内容。

具体来说，我想要一个插件，当我需要一个目录时，它会自动需要该目录中的所有文件（递归地）。

例如，假设我们有以下目录结构：

• 富
  • 酒吧.js
  • 巴兹.js
• main.js

main.js 有：

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

我希望 webpack 自动生成 foo/index.js：

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

我已经阅读了大部分 webpack 文档。github.com/webpack/docs/wiki/How-to-write-a-plugin有一个生成资产的示例。但是，我找不到如何按需生成资产的示例。看起来这应该是一个解析器，但是解析器似乎只输出文件路径，而不输出文件内容。

Answer 1

实际上对于您的用例：

具体来说，我想要一个插件，当我需要一个目录时，它会自动需要该目录中的所有文件（递归地）。

你不需要插件。请参阅如何使用 webpack 加载子目录中的所有文件而不需要 require 语句

按需进行代码生成/制作可以很容易地在 JavaScript 中完成，为什么您要将代码生成专门限制为仅在WebPack “需要”时应用？

由于 NodeJS 本身会查找 index.js，如果您需要一个目录，您可以很容易地生成任意导出：

//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;