如何使用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可以做寻找科尔多瓦的版本，但我不知道/我怎么可以把它退回到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位于config对象的根目录。

答案到此结束，但还有更多。

该resolve.root参数的额外好处是，您现在可以使用相对于SRC_PATH 而不是凌乱的路径进行导入../../../

当然，你需要有NODE_MODULES_PATH和SRC_PATH预先定义。

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

import c from 'components/component1';

要么

var c = require('components/component1')

Answer 2

我遇到了同样的问题，这是我的解决方案：

const fs = require('fs');
const path = require('path');
...
new webpack.NormalModuleReplacementPlugin(/\.ts$/, function(resource) {
    if (!resource.request.endsWith('.cordova.ts')) {
        var file_for_cordova = resource.request.replace(/\.ts$/, '.cordova.ts');
        if (fs.existsSync(path.resolve(resource.context, file_for_cordova))){
            resource.request = file_for_cordova;
          }
      }
}),

我认为，它仍然不完美，你可以改进它