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

Question

[Danila232]

Сделал 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,  
    hot: isDev,    // (почему тут не true?..) 
    historyApiFallback: 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, что они делают, и можно ли как-то задать режимы попроще?

Comments

[szQocks]

но не понял для чего это

- это просто глобальные переменные для приложения и всё

можно ли как-то задать режимы попроще?

- куда ещё проще ? и так проще некуда

[Danila232]

szQocks, не, ещё проще было

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

[szQocks]

Danila232, это без переменных, они там нужны будут в настройке кофига, что бы понимать что за режим сейчас

можно так

"dev": "webpack-dev-server --env mode=development",
    "build": "webpack --env mode=production",

но там уже из функции возвращать объект

module.exports = (env) => {
  const mode = env.mode;
  
  return {
    mode,
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "build"),
      filename: 'js/bundle-[contenthash].js',
      chunkFilename: 'js/chunk-[contenthash].js',
      publicPath: mode === 'development' ? "/" : "./",
      sourcePrefix: "\t",
      assetModuleFilename: "./assets/[name]-[contenthash][ext]",
      clean: true,
    },
    module: {...
    ...

конечно весь свой конфиг я скидывать не буду, потому что тратил на него пару часов) да и не факт что мой конфиг подошёл бы тебе

[Сергей delphinpro]

что значат эти NODE_ENV,

https://yandex.ru/search/?text=переменная+среды

Answer 1

[Михаил Р.]

но я не могу понять что такое NODE_ENV и isDev

Режим сборки, development или production.

можно ли как-то задать режимы попроще?

А что тут сложного? Если проект не маленький, то обычно создают 2 разных файла конфигурации вебпака, один под devevelopment, другой под production.

Comments

[Danila232]

Я с Node.js пока не знаком, поэтому пока что сложновато