Heim  >  Fragen und Antworten  >  Hauptteil

Können Probleme mit dem Modulimportpfad während der Webpack-Kompilierung gelöst werden?

<p>Ich möchte einen Build erstellen, der basierend auf Umgebungsvariablen nur bestimmte Komponenten im Bundle enthält. </p> <p>Zum Beispiel, wenn ich die Komponente wie folgt importiere: </p> <pre class="brush:php;toolbar:false;">Modul1 aus '@/components/Module1' importieren</pre> <p>Ich möchte, dass der Pfad tatsächlich so transformiert wird, dass der Import so aussieht: </p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/brands/' +process.env.APP_BRAND + 'Module1'</pre> <p>Ich möchte dies nicht für alle Importe tun, sondern nur für bestimmte Importe (z. B. Module mit Markenversionen). Daher möchte ich dem Importpfad möglicherweise etwas wie <code>!brand! voranstellen. </code>, der als Indikator für die Anwendung der Pfadtransformation dient. Daher sollte die obige Logik nur für die folgenden Importpfade ausgeführt werden: </p> <pre class="brush:php;toolbar:false;">import Module1 from '!brand!@/components/Module1'</pre> <p>Wenn <code>process.env.APP_BRAND</code> falsch ist, möchte ich einfach den ursprünglichen Import beibehalten (z. B. einfach das Präfix <code>!brand!</code> entfernen). Weg ). </p> <p>Der wichtige Punkt ist also, dass ich möchte, dass dies zur Build-Zeit geschieht, damit Webpack das Modul statisch analysieren und einen optimierten Build erstellen kann. Ist das machbar? Ich glaube, ich muss diese Pfadkonvertierungslogik irgendwie hinzufügen, aber wie soll ich das machen? Soll ich einen Loader oder ein Plugin erstellen oder gibt es eine fertige Lösung? </p> <p>Ich verwende Webpack 5. </p>
P粉231079976P粉231079976443 Tage vor507

Antworte allen(1)Ich werde antworten

  • 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模块必须是绝对路径

    Antwort
    0
  • StornierenAntwort