Как настроить livereload webpack 5?

Для настройки livereload в Webpack 5 необходимо выполнить несколько шагов:

1. Установите webpack-dev-server пакет:

npm install webpack-dev-server --save-dev

2. В вашем конфигурационном файле webpack (как правило, это файл webpack.config.js) добавьте следующий код:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // остальная конфигурация webpack
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8000,
    hotOnly: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

3. В файле package.json добавьте секцию "scripts" следующим образом:

"scripts": {
  "start": "webpack serve --open"
}

4. Запустите команду npm start в вашей командной строке:

npm start

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

Дополнительно, вы также можете использовать плагин html-webpack-plugin для автоматической генерации HTML-файлов, которые будут подключать ваш сгенерированный бандл скриптов.

Надеюсь, эта информация поможет вам настроить livereload в Webpack 5!