Шаг 6. Webpack-dev-server и его настройка

Эта функция является одной из самых полезных, ведь она заменяет все встроенные в редакторы кода и служит исключительно для разработки.

Как сервер webpack работает изнутри

Когда мы вводим команду npm start, запускается сервер разработки. Он «под капотом» выполняет те же функции, что и при сборке проекта. Простыми словами, когда мы пишем код и сохраняем файл, сервер разработки преобразует код в понимаемый для браузера, а затем моментально показывает нам результат или ошибку. Преобразование происходит незаметно для глаз, так как вся информация хранится в оперативной памяти компьютера.

Что можно настраивать в плагине

Так как webpack-dev-server нужен для разработки, его конфиг выносится в файл webpack.dev.js:

module.exports = {
  mode: 'development', // указываем мод
  devServer: {
    static: {
      directory: path.join(__dirname, '../src/assets'), // путь к директории со статическими файлами (картинками, шрифтами, видео, аудио)
    },
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    open: true, // автоматически открывает браузер 
    port: 1234, // можем самостоятельно задавать порт (localhost:1234)
    hot: false, // обычно выключается, ведь если он включён, то изменения в HTML при разработке не отображаются
  },
};

Обратите внимание: если есть ошибки, webpack по умолчанию выводит сообщение на всё окно браузера. Чтобы управлять этим поведением, нужно добавить поле client ---> overlay, где есть поля с ошибками и предупреждениями, которые мы можем отключать.

В качестве бонуса, чтобы улучшить визуальное восприятие происходящего в консоли, можно добавить легковесный пакет webpackbar. Для этого нужно его скачать:

npm i webpackbar -D

И затем подключить в файле webpack.base.js:

const WebpackBar = require('webpackbar'); // подключаем

plugins: [].concat(
  fileName.map(
    (file) =>
      new HtmlWebpackPlugin({
        inject: 'head',
        template: `./${file}.html`,
        filename: `./${file}.html`,
        chunks: [file],
        minify: {
          html5: true,
          collapseWhitespace: true,
          removeComments: true,
          removeTagWhitespace: true,
        },
      }),
  ),
  [new MiniCssExtractPlugin(), new WebpackBar()].filter(Boolean), // добавляем плагин
)