webpack - 如何使用 webpack.NormalModuleReplacementPlugin 进行可选的条件文件加载

Question

我希望实现的是为 Web 应用程序和cordova 应用程序拥有一个单一的代码库。

我想要一个看起来像这样的文件夹/文件结构:

- components
  - component1.js
  - component2.js
  - component2.cordova.js

理想情况下，我想继续使用 import Component2 from 'component2'无论我在哪里导入组件。

我将为每个构建创建一个单独的 webpack.config 文件，所以希望我可以让cordova webpack 配置首先查找 component1.cordova.js ，如果不存在，回退到 component1.js .

好像 webpack.NormalModuleReplacementPlugin可以寻找cordova 版本，但我不确定是否/如何让它回到 component1.js如果 component1.cordova.js不存在。

Answer 1

我相信不需要插件。

您需要执行以下操作:

resolve: {
        root: [SRC_PATH, NODE_MODULES_PATH],
        fallback: NODE_MODULES_PATH,        
        extensions: ['.cordova.js','.js'],
}

关键是 extensions参数。您可能已经注意到，扩展按给定的顺序进行探测。

如果您需要明确要求 .js 或 .cordova.js 之一，您应该指定完整的文件名，例如: require('components/c1.cordova.js')
注: resolve位于配置对象的根。

所以答案到此结束，但还有更多。
resolve.root 的额外奖励参数是您现在可以使用相对于 SRC_PATH 的路径导入而不是凌乱的 ../../../
当然，你需要有 NODE_MODULES_PATH和 SRC_PATH预先定义。

使用此配置，您可以在 SRC_PATH 树中的任何文件中写入如下内容:

import c from 'components/component1';

或者

var c = require('components/component1')