webentwicklung-frage-antwort-db.com.de

Wie werden .env-Dateivariablen an die Webpack-Konfiguration übergeben?

Ich bin neu im Webpack und habe fast alle Build-Abschnitte ausgearbeitet, aber jetzt besteht das Problem darin, dass ich die Umgebungsvariablen von einer .env-Datei an die Webpack-Konfiguration übergeben möchte, sodass ich diese Variablen über webpack.DefinePlugin plugin an meine Build-Dateien übergeben kann.

Momentan kann ich Umgebungsvariablen direkt vom Webpack an meinen Build übergeben. Bitte beachten Sie den Code, den ich im Webpack verwendet habe.

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

Mein package.json-Build-Skript lautet

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

Sie können das Paket dotenv für diesen Zweck verwenden

Referenz: https://www.npmjs.com/package/dotenvhttps://github.com/motdotla/dotenv

Benötigen Sie dotenv oben in der Webpack-Konfigurationsdatei wie folgt (stellen Sie Ihren .env-Pfad korrekt ein).

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

in webpack config plugins verwenden 

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

Jetzt können Sie die env-Variablen in Ihrer App verwenden. Versuchen Sie console.log(process.env); in Ihrem App-Code

9
Rameez Rami

Ich kann nichts kommentieren, um Informationen zu klären, also entschuldige ich mich für die Antwort.

Du könntest es tun:

var env = require('.env');

dann 

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

Aber ich mache Annahmen über Ihre .env-Datei und die Art und Weise, wie sie mit dieser Antwort eingerichtet wird

1
DevinFlick

Aus webpack docs :

Die Webpack-Befehlszeilenumgebungsoption --env ermöglicht das Übergeben von in beliebig vielen Umgebungsvariablen. Umgebungsvariablen wird in Ihrer webpack.config.js zugänglich gemacht. Zum Beispiel, --env.production oder --env.NODE_ENV = local (NODE_ENV wird üblicherweise verwendet, um den Umgebungstyp zu definieren, siehe hier.)

in deinem package.json 

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

in deinem 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