Variabile di ambiente con webpack su sviluppo e produzione

Question

Sono abbastanza nuovo al mondo di utilizzare strumenti di sviluppo come Webpack e relativi parenti, quindi forse questa domanda è un po 'noobish ma per favore capiscimi.

background: sviluppo un'app web lato client (utilizzando reactjs + redux) e utilizzo di webpack come strumento di sviluppo e caricatore di server di sviluppo. In questo momento devo fare alcune linee di codice solo in ambiente dev (logging e roba). Così ho visto sopra la rete l'utilizzo di webpack.DefinePlugin plugin per impostare la variabile process.env.NODE_ENV e il codice è come questo:

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

Poi, se il NODE_ENV varibale non è impostato sulla mia macchina (che non è per il momento) è automaticamente impostato sullo sviluppo. Ho ragione?

E la macchina di produzione? devo impostare questa variabile env su 'produzione' nel file /etc/environment?

Poi un'altra domanda è come webpack sa qual è il NODE_ENV quando servo l'app? è compilato quando eseguo la compilazione sul computer di produzione e impostato nel pacchetto bundle.js? ($ webpack --progress -p)

Un'altra domanda è: come abilitare/disabilitare le funzionalità in ambiente di produzione o di sviluppo? basta fare una condizione if dichiarazione come questa:

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

E ultimo, se questo è ciò che fa davvero WebPack, è vero transpiling questo pezzo di codice per le bundle.js costruiti? se è così, è visibile all'utente finale giusto? c'è qualcosa a che fare con quello?

Spero che non sia molto, grazie mille!

Answer 1

sulla macchina di produzione si può costruire i propri script con il comando

NODE_ENV=production webpack 

D'altra parte che passa questa variabile per /etc/environment è anche la soluzione.

---

process.env.NODE_ENV viene convertito in stringa statica in bundle.js

per esempio se si esegue NODE_ENV=production webpack su questo frammento

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

in bundle.js troverete (a cura)

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

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

---

Quindi, secondo a mettere in discussione disabilitare funzionalità tuo codice è valido su abilitare /.

---

Se si desidera rimuovere il corpo della condizione, se è falsa (come nell'esempio di cui sopra non si vuole mostrare console.log('this is visible in development'); in production ambiente), è necessario utilizzare

new webpack.optimize.UglifyJsPlugin() 

Sarà rimuovere tutte le tue dichiarazioni if ​​con la condizione false.