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

Question

Ich möchte einen Build erstellen, der basierend auf Umgebungsvariablen nur bestimmte Komponenten im Bundle enthält.

Zum Beispiel, wenn ich die Komponente wie folgt importiere:

Modul1 aus '@/components/Module1' importieren

Ich möchte, dass der Pfad tatsächlich so transformiert wird, dass der Import so aussieht:

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

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 !brand! voranstellen. , der als Indikator für die Anwendung der Pfadtransformation dient. Daher sollte die obige Logik nur für die folgenden Importpfade ausgeführt werden:

import Module1 from '!brand!@/components/Module1'

Wenn process.env.APP_BRAND falsch ist, möchte ich einfach den ursprünglichen Import beibehalten (z. B. einfach das Präfix !brand! entfernen). Weg ).

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?

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