首頁  >  問答  >  主體

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

<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>
P粉231079976P粉231079976443 天前509

全部回覆(1)我來回復

  • P粉714844743

    P粉7148447432023-08-27 13:17:58

    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模組必須是絕對路徑

    回覆
    0
  • 取消回覆