Как сделать так, чтобы в webpack 5 работал hot reload?

Hot reload является одной из самых полезных функций веб-разработки, поскольку позволяет в реальном времени просматривать изменения в коде без необходимости ручного обновления страницы. В webpack 5 мы можем настроить hot reload с помощью встроенного плагина HotModuleReplacementPlugin.

Для начала убедитесь, что у вас установлена последняя версия webpack и webpack-dev-server:

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

Затем создайте конфигурационный файл webpack.config.js, если еще не создали:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

Основные вещи, которые нам нужно настроить:

1. Добавьте опцию hot: true в настройки devServer, чтобы включить hot reload.
2. Добавьте опцию open: true, чтобы автоматически открыть веб-сервер при запуске.
3. Используйте плагин HotModuleReplacementPlugin для активации горячей замены модулей.

Теперь вам нужно настроить скрипт запуска в package.json:

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

Запустите проект, выполнив команду npm start.

Webpack будет собирать и запускать приложение. При каждом изменении исходного кода, webpack будет автоматически обновлять страницу.

Важно отметить, что HMR может не работать для всех типов файлов. В некоторых случаях необходимо добавить дополнительные настройки в конфигурационный файл webpack, чтобы поддерживать hot reload для конкретных типов файлов, таких как CSS или React компоненты. Эти настройки будут зависеть от используемых вами инструментов и библиотек.

Надеюсь, это поможет вам настроить hot reload в webpack 5!