<p>我想創建一個構建，根據環境變量，在捆綁包中只包含特定的組件。 </p> <p>例如，當我像這樣導入元件：</p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/Module1'</pre> <p>我希望路徑實際上被轉換，使得導入看起來像這樣：</p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/brands/' process.env.APP_BRAND 'Module1'</pre> <p>現在，我不想對所有的導入都這樣做，只想對特定的導入（例如，具有品牌版本的模組）進行這樣的操作，所以也許我想在導入路徑前加上類似於< code>!brand!</code>的前綴，這將是應用程式路徑轉換的指示符。 因此，上述邏輯應僅對以下導入路徑執行：</p> <pre class="brush:php;toolbar:false;">import Module1 from '!brand!@/components/Module1'</pre> <p>如果<code>process.env.APP_BRAND</code>為假值，那麼我只想保持原始導入（例如，只從路徑刪除<code>!brand!</code>前綴）。 </p> <p>所以重要的一點是，我希望這在建置時完成，這樣Webpack可以靜態分析模組並創建最佳化的建置。這個可行嗎？我想我需要以某種方式添加這個路徑轉換邏輯，但是我該如何做呢？我應該創建一個loader，插件還是有現成的解決方案嗎？ </p> <p>我正在使用Webpack 5。 </p>

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')
    }
  },
};