是否可以在 Webpack 的编译时解析导入的模块路径？答案

【问题标题】：Is it possible to resolve imported module path at compile time in Webpack?是否可以在 Webpack 的编译时解析导入的模块路径？
【发布时间】：2021-09-27 22:32:20
【问题描述】：

我想创建一个基于 env 变量的构建，它只包含捆绑包中的特定组件。

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

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 可以静态分析模块并创建优化的构建。这可能吗？我想我需要以某种方式添加这个路径转换逻辑，但我应该怎么做呢？我应该创建一个加载器、插件还是有现有的解决方案？

我正在使用 Webpack 5。

【问题讨论】：

标签： javascript reactjs vue.js webpack webpack-5

【解决方案1】：

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

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 进程）并做出相应的决定。此外，您的解析模块必须是绝对路径。

【讨论】：