Comment puis-je utiliser les deux types de configuration webpack promesse et la fonction d'environnement ensemble?

Question

J'ai besoin d'utiliser une bibliothèque dans la configuration de webpack pour obtenir le nom d'utilisateur de l'individu qui fait la construction. J'utilise le package npm 'username' qui est asynchrone et renvoie une promesse lorsque le nom d'utilisateur est obtenu.

const username = require ('nom d'utilisateur');

nom d'utilisateur(). Then (nom d'utilisateur => {});

Le webpack documentation décrit un type de configuration pour retourner une promesse

module.exports =() => {return new Promise ((résolution, rejeter) => {})}

et un autre type de configuration à utiliser des variables d'environnement à partir de la ligne de commande CLI

module.exports = fonction (env) {}

, mais pas comment utiliser les deux ensemble.

Je dois être en mesure de lecture depuis la ligne de commande les variables d'environnement --env=prod ensemble de la CLI comme suit dans le package.json

"scripts": { 
 
    "start": "webpack-dev-server --env=local --port=4200 --history-api-fallback", 
 
    "build": "webpack", 
 
    "build-dev": "rimraf dist && webpack --env=dev --colors --bail", 
 
    "build-prod": "rimraf dist && webpack -p --env=prod --colors --bail", 
 
    "test": "karma start ./karma.conf.js" 
 
    },

Answer 1

Après quelques essais et erreurs , J'ai trouvé qu'il est possible de combiner les deux techniques de fichier de configuration, vous pouvez avoir les exportations définies à la fonction qui vous donnera les variables d'environnement, puis cette fonction peut retourner une promesse, et la promesse peut retourner la config. De cette manière, vous pouvez avoir le résultat de la promesse et les variables d'environnement disponibles dans la configuration de webpack.

module.exports = function(env) { 
 
    console.log(`Building target environment: ${env}`); 
 

 
    return username().then(username => { 
 
     return { 
 
     "devtool": "source-map", 
 
     // ... original config here 
 
     }; 
 
    }); 
 
};