能否在Webpack编译过程中解决模块导入路径问题？

Question

我想创建一个构建，根据环境变量，在捆绑包中只包含特定的组件。

例如，当我像这样导入组件：

import Module1 from '@/components/Module1'

我希望路径实际上被转换，使得导入看起来像这样：

import Module1 from '@/components/brands/' + process.env.APP_BRAND + 'Module1'

现在，我不想对所有的导入都这样做，只想对特定的导入（例如，具有品牌版本的模块）进行这样的操作，所以也许我想在导入路径前加上类似于!brand!的前缀，这将是应用路径转换的指示符。 因此，上述逻辑应仅对以下导入路径执行：

import Module1 from '!brand!@/components/Module1'

如果process.env.APP_BRAND为假值，那么我只想保持原始导入（例如，只从路径中删除!brand!前缀）。

所以重要的一点是，我希望这在构建时完成，这样Webpack可以静态分析模块并创建优化的构建。这个可行吗？我想我需要以某种方式添加这个路径转换逻辑，但是我应该如何做呢？我应该创建一个loader，插件还是有现成的解决方案吗？

我正在使用Webpack 5。

Answer 1

Webpack提供了一个模块resolve功能，你可以在这里使用。阅读这里的文档。例如，在你的情况下，你可以这样做：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@/components/Module1': path.join(
        __dirname,
        process.env.APP_BRAND
          ? '@/components/brands/' + process.env.APP_BRAND + 'Module1'
          : '@/components/Module1')
    }
  },
};

请注意，在这里你需要将环境变量传递给你的Webpack进程（也就是Node.js进程），并根据此进行决策。另外，你的resolve模块必须是绝对路径。