Umgebungsvariable mit Webpack auf Dev und Produktion

Question

Ich bin ziemlich neu in der Welt der Verwendung solcher Build Tools wie Webpack und seine Verwandten, also vielleicht ist diese Frage ein wenig noobish, aber bitte verstehen Sie mich.

Hintergrund: Ich entwickle eine Client-Seite Web-App (mit reactjs + redux) und mit Webpack als mein Build-Tool und dev-Server Loader. Im Moment muss ich einige Codezeilen nur in der Entwicklungsumgebung erstellen (Logging und so). So sah ich über das Netz die Verwendung von webpack.DefinePlugin Plugin die process.env.NODE_ENV Variable zu setzen, und der Code ist wie folgt:

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
     }) 
] 

Dann, wenn die NODE_ENV Varibale nicht auf meinem Rechner gesetzt (was zur Zeit nicht ist) es automatisch auf Entwicklung gesetzt. Habe ich recht?

Was ist mit der Produktionsmaschine? Muss ich diese Umgebungsvariable in der /etc/environment Datei auf "Produktion" setzen?

Dann eine andere Frage ist, wie Webpack weiß, was ist der NODE_ENV, wenn ich die App diene? Ist es kompiliert, wenn ich den Build auf der Produktionsmaschine mache und in die gebaute bundle.js setze?()

Eine weitere Frage ist, wie kann ich Funktionen in der Produktion oder Entwicklungsumgebung aktivieren/deaktivieren? nur tun, ein, wenn die Bedingung Anweisung wie folgt:

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

Und letzten, wenn dies ist, was WebPACK wirklich tut, ist es dieses Stück Code zu dem eingebauten bundle.js transpiling? Wenn ja, ist es für den Endbenutzer sichtbar? hat das etwas damit zu tun?

Hoffe, es ist nicht zu viel, danke ein Haufen!

Answer 1

auf der Produktionsmaschine Sie Ihre Skripte mit dem Befehl

NODE_ENV=production webpack 

Auf der anderen Seite bauen kann diese Variable auf /etc/environment vorbei ist auch Lösung.

---

process.env.NODE_ENV wird auf statischen String umgewandelt in bundle.js

zum Beispiel, wenn Sie NODE_ENV=production webpack auf diesem Schnipsel

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

in bundle.js laufen Sie (bearbeitet)

finden

if ('production' == 'development') { 
    console.log('this is visible in development'); 
} 

if (false) { // 'production' == 'development' 
    console.log('this is visible in development'); 
} 

---

So nach etwa aktivieren/deaktivieren Funktionen Code gültig ist zu hinterfragen.

---

Wenn Sie Körper Bedingung entfernen möchten, wenn es falsch ist (wie in obigem Beispiel Sie console.log('this is visible in development'); in production Umgebung zeigen, nicht wollen), sollten Sie

new webpack.optimize.UglifyJsPlugin() 

verwenden Es wird entfernen Alle Ihre if-Anweisungen mit false Zustand.