Webpack require tableau d'exigences (chaîne dynamique require)

Question

Je voudrais exiger une liste d'exigences dans webpack. Dès que je remplace le paramètre string de la fonction require par une variable ou une constante, il ne peut plus injecter l'exigence.

Voici un exemple qui fonctionne parfaitement :

const angular = require('angular');

Mais dès que j'ai remplacé ce texte par le suivant, cela ne fonctionne plus :

const angularString = 'angular';
const angular = require(angularString);

Mon objectif est d'avoir une liste statique de dépendances et de les injecter une par une, comme ceci :

const angularDependencies = [
    'angular-socket-io',
    'angular-ui-router'
];

for(var i = 0; i < angularDependencies.length; i++) {
    require(angularDependencies[i]);
}

Voici le message d'erreur que j'ai reçu :

WARNING in ./app/app.js
Critical dependencies:
14:1-14 the request of a dependency is an expression
 @ ./app/app.js 14:1-14

WARNING in ./app ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./app ^\.\/.*$

WARNING in ./app ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./app ^\.\/.*$

Answer 1

Cela ne fonctionnera pas car WebPack est un outil de construction qui analyse vos fichiers sources pour déterminer ce qu'il faut inclure. Il n'exécute pas votre code pour voir ce qu'il fait. Cela signifie que votre code ne peut inclure des chaînes que dans des déclarations require.

Si vous voulez écrire votre code de cette façon, jetez un coup d'œil à SystemJS au lieu de WebPack.

https://github.com/systemjs/systemjs

Answer 2

Webpack prend en charge les exigences dynamiques, mais vous devez lui indiquer comment trouver les fichiers à l'aide des éléments suivants contextes . Vous pourriez essayer quelque chose comme ça avant de demander vos modules :

var req = require.context(".", true, /^angular-.+$/)
req("angular-thing")

Si cela ne fonctionne pas, vous devrez utiliser une approche différente dans votre code, car WebPack doit savoir quels modules inclure dans votre bundle au moment de la compilation.

Answer 3

Créer angularDependencies.js :

module.exports = [
    'angular-socket-io',
    'angular-ui-router'
];

Puis l'ajouter à webpack.config.js section de saisie . Il devrait ressembler à ceci :

require('./src/angularDependencies').concat(['./myApp.js'])