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

Question

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

我希望能够做这样的事情:

webpack --config webpack-config-fake.js

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

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

问题:

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

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，如果没有找到相应的模块，则回退到 dependencyPath .

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