recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>Je souhaite créer une version qui inclut uniquement des composants spécifiques dans le bundle en fonction de variables d'environnement. </p> <p>Par exemple, lorsque j'importe le composant comme ceci : </p> <pre class="brush:php;toolbar:false;">importer le Module1 depuis '@/components/Module1'</pre> <p>Je souhaite que le chemin soit réellement transformé pour que l'importation ressemble à ceci : </p> <pre class="brush:php;toolbar:false;">importer le module1 depuis '@/components/brands/' + process.env.APP_BRAND + 'Module1'</pre> <p>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 <code>!brand ! </code>, 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 : </p> <pre class="brush:php;toolbar:false;">importer le module1 depuis '!brand!@/components/Module1'</pre> <p>Si <code>process.env.APP_BRAND</code> est faux, alors je souhaite simplement conserver l'importation d'origine (par exemple, supprimez simplement le préfixe <code>!brand!</code> du chemin ). </p> <p>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 ? </p> <p>J'utilise Webpack 5. </p>
P粉231079976P粉231079976460 Il y a quelques jours533

répondre à tous(1)je répondrai

  • P粉714844743

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

    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.

    répondre
    0
  • Annulerrépondre