Webpack：针对每个入口点的不同（Define Plugin）设置

Question

对于我的一些捆绑文件，我想构建不同的版本（例如一个带有管理功能，另一个没有）。

似乎通常使用DefinePlugin来处理此类问题，但也有像if-loader或ifdef-loader等加载器可用。

现在的问题是，它们似乎都共享所有入口点之间的配置。我需要一种为不同的入口点设置不同配置（例如：{with_admin_mode: true}和{with_admin_mode: false}）的方法。

我考虑将配置放在实际入口点JS文件的顶部，但是我不知道如何正确创建跨所有模块检测为true == false并删除的全局变量。

- AndreKR

Answer 1

抱歉，我本意是提供providePlugin而不是definePlugin。DefinePlugin将直接替换您代码中的变量，并不会创建全局变量。

您可以使用providePlugin从您创建的模块文件中设置全局配置变量：

在您的webpack配置文件中：

plugins: [
  new webpack.ProvidePlugin({
    'config': 'config'
  })
  ...
],
resolve: {
  alias: { 'config':  path.resolve(__dirname, './config') },
  extensions: ['.js']
}

同时，config 将被设置为一个全局变量，导出到 config.js 文件中。

然后，您可以在不同的入口点访问和修改此全局变量。例如，您可以在 entry1.js 中执行 config.with_admin_mode = true;，并在 entry2.js 中执行 config.with_admin_mode = false;。

另一种解决方案是直接从您的模块将全局变量设置在 window 上，例如 window.with_admin_mode = true;

- JusMalcolm

---

读了10遍后，我仍然不明白你的意思。请详细说明。 - AndreKR

我尝试了这个，但它不起作用。即使我在同一个文件中放置了 config.with_admin_mode = false; 和 if (config.with_admin_mode === true) ，if 块仍然被转换为 !0===t.with_admin_mode&&console.log("foo")，但它并没有被移除。 - AndreKR

啊，我错过了你想要移除块的要求。在这种情况下，最好使用definePlugin和webpack的多编译器模式。将webpack配置的exports设置为配置数组，并更改definePlugin和entries属性。请查看此示例：https://github.com/webpack/webpack/tree/master/examples/multi-compiler - JusMalcolm

如果您的代码在初始化期间运行，那么这并没有什么帮助。由于您需要在代码之前放置导入，因此常见的代码将在您有机会在 entry.js 中分配任何内容之前运行。 - riv

Answer 2

尝试查看webpack-merge - 智能合并应该可以帮助您解决问题。

它可以帮助您使用特定的入口点、插件和任何您想要的内容来创建动态配置，这取决于环境中的某些变量。

将配置拆分为不同的文件是一个好习惯。 您可以通过所有入口点使用相同的东西来创建一些常见的配置，例如加载器，然后为with_admin_mode和without_admin_node模式创建自定义配置。

- chuve

---

我不太明白。你是在建议我只需制作多个配置文件吗？这正是我想避免的，因为它们共享很多设置，可能会破坏CommonsChunkPlugin。 - AndreKR