如何使用 webpack 插件动态添加模块/依赖项？答案

【问题标题】：How to dynamically add a module/dependency with a webpack plugin?如何使用 webpack 插件动态添加模块/依赖项？
【发布时间】：2016-10-21 05:22:08
【问题描述】：

我觉得我想要实现的目标并不难。但 webpack 文档严重混乱，我为此花费了很多时间。

如何将“动态”模块注入到 webpack 构建中？我想在构建时创建这个模块。

举个简单的例子，我如何在构建时将此字符串作为新模块注入？

"module.exports = new Date();"

然后假设我希望该模块具有名称 "myDate"

我非常希望我的应用程序中的任何其他模块都能够解决它：

var myDate = require('myDate');

现在这是一个非常简单的例子。我的目的会更加复杂，涉及读取文件来创建这个“动态”模块。我知道 define 插件，不幸的是它不适合我的需要。

我将非常感谢任何帮助。谢谢。

【问题讨论】：

一个想法是做var myDate = require('./path/to/dynamically/generated/file'); 然后，在构建时，您将使用您想要的任何方式在该路径创建一个文件。这有帮助吗？
@jmeas 是的，我也确实想到了这一点。我想避免这样做，因为我将杂乱的文件添加到使用我插件的人的文件系统中。它还有一个很长的“要求”物理文件路径。我想要更多别名类型的东西。
你也可以写一个webpack loader插件来生成js，然后传递给webpack编译过程。
@ChrisSeufert 你有例子吗？还是文档？我确实对此进行了调查，但一切都很混乱。

标签： javascript webpack webpack-2 webpack-plugin

【解决方案1】：

找到这个插件：virtual-module-webpack-plugin

README.md 中描述的使用示例

const VirtualModulePlugin = require('./virtual-module-webpack-plugin');

  // ...

  plugins: [
    new VirtualModulePlugin({
      moduleName: 'src/mysettings.json',
      contents: JSON.stringify({ greeting: 'Hello!' })
    })
  ]
}

您可以查看实施并尝试自己的实施。

【讨论】：