Webpack - 根据构建配置要求文件

Question

在我们的项目中，可以在“假后端”模式或“真后端”模式下运行应用程序。开发人员可以在本地进行开发，并使用实现后端API但返回模拟数据的函数。

我想要能够执行类似以下命令的操作： webpack --config webpack-config-fake.js 然后，在代码中，我想要执行以下操作：

var mockSuffix = webpackConfig.options.isFake ? "-fake" : "";
var backendApi = require('backend-api'+mockSuffix+'.js')

问题：

• 这样做听起来像是正确的方式吗？
• 我如何在我的源代码中访问使用的webpackConfig？
• 我考虑的另一种方法是使用Webpack上下文。然而，我不确定它是否可以用于帮助这里。这是需要考虑的吗？

- VitalyB

Answer 1

在您的“假”配置中，您可以通过使用NormalModuleReplacementPlugin来替换所需的模块。 在以下示例中，require('backend-api')将返回backend-api-mock。

plugins: [
  new webpack.NormalModuleReplacementPlugin(/backend-api/, function(result) {
    result.request = result.request.replace(/(backend-api)/, '$1-mock');
  }),
],

你还可以指定你的模拟文件夹在解析请求时优先考虑。请参见resolve.root。在下面的示例中，require('backend-api')将首先查找mockPath，如果没有找到相应的模块，则回退到dependenciesPath。

resolve: {
  root: [mockPath, dependenciesPath],
},

- Alexandre Kirszenberg

---

有趣。我会研究一下这个选项。 - VitalyB

太棒了，谢谢！我一直在尝试使用一些外部的 string-replace 插件来完成这个任务，但这一个完全不同寻常！ - Adam Szmyd