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

Posted 2023-02-23

【中文标题】是否可以在 Webpack 的编译时解析导入的模块路径？

【英文标题】：Is it possible to resolve imported module path at compile time in 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。

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