web-dev-qa-db-fra.com

Comment passer des variables de fichier .env à la configuration de webpack?

Je suis nouveau sur Webpack et j'ai élaboré presque toutes les sections de construction, mais le problème est que je veux passer les variables d'environnement d'un fichier .env à la configuration de Webpack, afin de pouvoir les transmettre à mes fichiers de construction via le plugin webpack.DefinePlugin.

Actuellement, je suis en mesure de passer variable d’environnement directement de webpack à ma construction. S'il vous plaît voir le code ci-dessous que j'ai utilisé dans webpack.

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE"
        }),

Mon script de construction package.json est

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    }
angularjswebpackenvironment-variableswebpack-dev-serverwebpack-2
8
ninja dev

Vous pouvez utiliser le paquet dotenv à cette fin

Référence: https://www.npmjs.com/package/dotenvhttps://github.com/motdotla/dotenv

En haut du fichier de configuration de webpack, exigez dotenv comme suit (définissez votre chemin .env de manière précise)

var dotenv = require('dotenv').config({path: __dirname + '/.env'});

dans la section des plugins de configuration webpack 

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

Vous pouvez maintenant utiliser les variables env dans l’ensemble de votre application. essayez console.log(process.env); dans votre code d'application

9
Rameez Rami

Je ne peux pas commenter pour clarifier les informations, donc mes excuses pour la réponse.

Vous pourriez faire:

var env = require('.env');

puis 

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE",
            "env_property": env.property
        }),

Mais je fais des hypothèses sur votre fichier .env et la façon dont il a été configuré avec cette réponse

1
DevinFlick

De webpack docs :

L'option d'environnement de ligne de commande webpack --env vous permet de transmettre dans autant de variables d'environnement que vous le souhaitez. Variables d'environnement sera rendu accessible dans votre webpack.config.js. Par exemple, --env.production ou --env.NODE_ENV = local (NODE_ENV est traditionnellement utilisé pour définir le type d'environnement, voir ici.)

dans votre package.json 

webpack --env.NODE_ENV=local --env.production --progress

dans votre webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
0
Jalal