Webpack:每个入口点不同的(定义插件)设置

Question

对于我的一些包文件，我想构建不同的版本(例如，一个有管理功能，一个没有)。

似乎DefinePlugin通常用于这类事情，但也有像if-loader或ifdef-loader这样的加载器可用。

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

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

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.with_admin_mode = true;

Answer 2

试着看看webpack-merge -智能合并应该能帮你解决这个问题。

它可以帮助动态配置特定的入口点，插件，以及任何你想要的东西，这取决于环境上的一些变量。

将配置拆分到不同文件中的良好做法。您可以通过所有入口点使用相同的内容进行一些通用配置，例如，加载程序，然后为with_admin_mode和without_admin_node模式进行自定义配置。