Как лучше настроить режимы в WebPack сборке?

Question

Как лучше настроить режимы в WebPack сборке?

Союз Здравых Сил Профи (521), на голосовании 2 недели назад

Сделал WebPack сборку, но при запуске проектика были неприятные ошибки - например при обновлении страницы всё ломалось, и другие неприятности. Тогда мои режимы были настроены так:

 "serve": "webpack serve --mode development --open ", 
 
"prod": "webpack --mode production", 
 
"dev": "webpack --mode development"

Ну и как я говорил, при запуске на них были всякие неприятности. Хотя я их взял то ли с видоса, то ли со статьи

Мне знающий человек сказал настроить их так:

 / webpack.config.js / 
 
const isDev = process.env.NODE_ENV === 'development'; 
 
devServer: {  
    static: {   
      directory: path.join(__dirname, 'dist'),   
    },  
    port: 9000,  
    historyApiFallback: isDev,  // (это я не понял за что отвечает, в доках читал)  
    hot: isDev,    // (почему тут не true?..) 
  }, 
 
/ package.json / 
"prod": "cross-env NODE_ENV=production webpack --mode=production",  
"dev": "cross-env NODE_ENV=development webpack serve --mode=development"

Ну и вроде в дев-режиме теперь работает как надо, но я не могу понять что такое NODE_ENV и isDev. Я читал что NODE_ENV "переменная окружения", но не понял что это(
cross-env это типо библ. для того чтобы эта переменная на всех ОС правильно задавалась.

Ну в общем сам вопрос: что значат эти NODE_ENV, isDev, что они делают, и можно ли как то задать режимы попроще?
Node.js ещё не знаю, поэтому не понимаю что тут для чего

Answer 1

Ваш друг правильно подсказал вам внести изменения в конфигурацию webpack и скрипты запуска в package.json, чтобы лучше управлять режимами сборки
java

 // webpack.config.js 
 
const isDev = process.env.NODE_ENV === 'development'; 
 
module.exports = { 
  // Настройки dev сервера 
  devServer: { 
    static: { 
      directory: path.join(__dirname, 'dist'), 
    }, 
    port: 9000, 
    historyApiFallback: isDev, 
    hot: isDev, 
  }, 
};

Здесь isDev будет true, если NODE_ENV установлено в 'development', и false в противном случае. Это позволяет вам устанавливать различное поведение вашего приложения в зависимости от режима сборки.
json

 // package.json 
 
"scripts": { 
  "prod": "cross-env NODE_ENV=production webpack --mode=production", 
  "dev": "cross-env NODE_ENV=development webpack serve --mode=development" 
}

Здесь ваши скрипты для запуска в различных режимах сборки используют cross-env, чтобы установить значение переменной NODE_ENV в соответствии с выбранным режимом. Затем webpack использует это значение для определения режима сборки.

Таким образом, настройка NODE_ENV и isDev позволяет вам динамически управлять поведением вашего приложения в зависимости от текущего режима сборки (разработка или продакшн). Это делает ваш процесс разработки более удобным и гибким, позволяя использовать различные конфигурации в зависимости от потребностей.