能否在Webpack編譯過程中解決模組導入路徑問題？

Question

我想創建一個構建，根據環境變量，在捆綁包中只包含特定的組件。

例如，當我像這樣導入元件：

import Module1 from '@/components/Module1'

我希望路徑實際上被轉換，使得導入看起來像這樣：

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

現在，我不想對所有的導入都這樣做，只想對特定的導入（例如，具有品牌版本的模組）進行這樣的操作，所以也許我想在導入路徑前加上類似於< code>!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模組必須是絕對路徑。