Webpack

Question

在我们的项目中，可以在 fake-backend 模式或 real-backend 模式下运行应用程序模式。这个想法是开发人员可以使用实现后端 API 但 return 模拟数据的函数在本地进行开发。

我希望能够做类似的事情：

webpack --config webpack-config-fake.js

然后在代码中我会做类似的事情：

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

问题：

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

Answer 1

在您的 "fake" 配置中，您可以通过 NormalModuleReplacementPlugin 替换所需的模块。在以下示例中，require('backend-api') 产生 backend-api-mock.

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

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

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

Webpack - 需要基于构建配置的文件

Webpack - Requiring a file based on build configuration