Окружающая среда с webpack на dev и производством

Question

Я довольно новичок в мире использования таких инструментов построения, как Webpack и его родственников, поэтому, возможно, этот вопрос немного noobish, но, пожалуйста, поймите меня.

background: Я разрабатываю веб-приложение на стороне клиента (с помощью reactjs + redux) и используя webpack как инструмент для сборки и загрузчик dev-сервера. Сейчас я должен сделать некоторые строки кода только в среде dev (запись и прочее). Так что я видел по сети использование webpack.DefinePlugin плагина установить переменную process.env.NODE_ENV и код выглядит так:

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

Тогда, если NODE_ENV varibale не установлен на моей машине (которая не является в данный момент) его автоматически устанавливается в развитие. Я прав?

А как насчет производственной машины? мне нужно установить эту переменную env в 'production' в файле /etc/environment?

Тогда еще один вопрос: как webpack знает, что такое NODE_ENV, когда я обслуживаю приложение? он скомпилирован, когда я делаю сборку на производственной машине и устанавливаю встроенный пакет bundle.js? ($ webpack --progress -p)

Другой вопрос: как включить или отключить функции в среде разработки или разработки? вобще, если оператор условия так:

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

И последнее, если это то, что WebPack действительно, является его transpiling этого куска коды для встроенного bundle.js? если это так, то видимо для конечного пользователя? есть ли что-то с этим?

Надеюсь, что это не много, спасибо кучу!

Answer 1

На рабочей машине вы можете построить свои сценарии с помощью команды

NODE_ENV=production webpack 

С другой стороны, проходящей эту переменную /etc/environment также решение.

---

process.env.NODE_ENV преобразуется в статическую строку в bundle.js

, например, если вы запустите NODE_ENV=production webpack на этом фрагменте

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

в bundle.js вы найдете (отредактированный)

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

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

---

Так, по вопросу о включения/выключения функции ваш код действителен.

---

Если вы хотите, чтобы удалить тело условие, если оно ложно (как в приведенном выше примере вы не хотите, чтобы показать console.log('this is visible in development'); в production среде), вы должны использовать

new webpack.optimize.UglifyJsPlugin() 

Это удалит все ваши операторы if с условием false.