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')yield 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],
},