小编Sha*_*vis的帖子

一般来说，我想知道如何按需在 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有一个生成资产的示例。但是，我找不到如何按需生成资产的示例。看起来这应该是一个解析器，但是解析器似乎只输出文件路径，而不输出文件内容。

我有一个用数据 uri 生成的 IMG DOM 元素。如何将它附加到 React.js“虚拟 DOM”？

当我尝试以下操作时：

myImgComponent = React.createClass({

  getInitialState: function() {
    slowGenerateImage((function(_this) {
      return function(img) { /* img is an HTMLImageElement */
        return _this.setState({
          image: img
        });
      };
    })(this));

    return {image: null};
  },

  render: function() {
    return div(
      {}, 
      this.state.image /* image is a raw HTMLImageElement */
    );
  }
});

我收到以下错误：

Invariant Violation: traverseAllChildren(...): Encountered an invalid child; DOM elements are not valid children of React components.