Les problèmes de chemin d'importation du module peuvent-ils être résolus lors de la compilation du Webpack ?

Question

Je souhaite créer une version qui inclut uniquement des composants spécifiques dans le bundle en fonction de variables d'environnement.

Par exemple, lorsque j'importe le composant comme ceci :

importer le Module1 depuis '@/components/Module1'

Je souhaite que le chemin soit réellement transformé pour que l'importation ressemble à ceci :

importer le module1 depuis '@/components/brands/' + process.env.APP_BRAND + 'Module1'

Maintenant, je ne souhaite pas faire cela pour toutes les importations, mais uniquement pour des importations spécifiques (par exemple, des modules avec des versions de marque), alors je souhaite peut-être ajouter au chemin d'importation quelque chose comme !brand ! , qui sera l'indicateur pour appliquer la transformation de chemin. Par conséquent, la logique ci-dessus ne doit être exécutée que pour les chemins d'importation suivants :

importer le module1 depuis '!brand!@/components/Module1'

Si process.env.APP_BRAND est faux, alors je souhaite simplement conserver l'importation d'origine (par exemple, supprimez simplement le préfixe !brand! du chemin ).

Le point important est donc que je souhaite que cela soit fait au moment de la construction afin que Webpack puisse analyser statiquement le module et créer une version optimisée. Est-ce faisable ? Je pense que je dois ajouter cette logique de conversion de chemin d'une manière ou d'une autre, mais comment dois-je le faire ? Dois-je créer un chargeur, un plugin ou existe-t-il une solution toute faite ?

J'utilise Webpack 5.

Answer 1

Webpack fournit une fonction module resolve que vous pouvez utiliser ici. Lisez la documentation ici. Par exemple, dans votre cas vous pourriez faire ceci :

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

Veuillez noter qu'ici, vous devez transmettre des variables d'environnement à votre processus Webpack (alias processus Node.js) et prendre des décisions en fonction de cela. De plus, votre module de résolution doit être un chemin absolu.