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

Question

[Weij33t]

Выводит в консоль одну-единственную строку - [HMR] Waiting for update signal from WDS..
И кроме этого ничего.
При изменении файлов все успешно компилируется, но перезагружать приходится вручную - скорость разработки страдает.

Webpack.config.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = (ext) => (isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`)

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  ]

  if (isDev) {
    loaders.push('eslint-loader')
  }

  return loaders
}

module.exports = {
  context: path.resolve(__dirname, './src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
    },
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    contentBase: path.join(__dirname, '../'), // попытки починить
    compress: true, // попытки починить
    port: 9000,
    hot: isDev,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // попытки починить
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new CopyPlugin([
      {
        from: path.resolve(__dirname, 'src/favicon.ico'),
        to: path.resolve(__dirname, 'dist'),
      },
    ]),
    new MiniCssExtractPlugin({
      filename: filename('css'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders(),
      },
    ],
  },
}

package.json

{
  "name": "weij33t",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "private": true,
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^3.0.4",
    "html-webpack-plugin": "^5.0.0-alpha.10",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "webpack": "^5.3.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}

Comments

[Алекс]

Тоже озадачился этим вопросом)) тут рабочая сборка вроде как горячая перезагрзука пашет

Answer 1

[MichelPodkhvatiln]

Если еще актуально, я нашел решение данной проблемы тут : https://github.com/webpack/webpack-dev-server/issu....

Кратко, проблема заключается в .browserslist .
Нужно в webpack.config.js добавить данную проверку:

target: process.env.NODE_ENV === "development" ? "web" : "browserslist",

Как-то так)

А также в Webpack 5 изменился вызов dev сервера.

"start": "cross-env NODE_ENV=development webpack serve"

Comments

[DenisLopatin]

Актуально, и ты правильно сделал что отписался. Тема не из легких у них сейчас действительно есть такая проблема. Только что сам часа 3 потратил на решение...

[zelenzoom]

Спасибо огромное! Я промучился несколько дней, а ту буквально одной строкой решается всё.

[args2517]

Присоединяюсь к благодарностям!!! это проблема до сих пор актуальна)))

[Vladimir2020]

+1
Спасибо!

[Alsu2804]

Спасибо вам за подсказку)

Answer 2

[mkedevel]

Данная проблема возникает после подключения пакета browserslist
Нужно добавить в webpack.config.js

{
   target: 'web'
}

Comments

[Tolmax]

Подскажите пож в какую именно строку надо вставить эту команду?

[Tolmax]

выдает такую ошибку
[webpack-cli] Invalid configuration object. Webpack has been initialized using a
configuration object that does not match the API schema.
- configuration.module.rules[1] has an unknown property 'target'. These propert
ies are valid:
object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude
?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneO
f?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, re
sourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.

Answer 3

[ShevchukOleg]

После обновы Webpack5 мы все пользовали неадаптированный webpack-dev-server семимесячной давности.
У меня все стало работать бодряком после:
1) webpack.config.jspn => add target: "web", to module.exports = {}
2) Удаления как browserslist как файла и как пункта в package.json
3) Прочтения: https://openbase.io/js/webpack-dev-server/versions...
4) npm i webpack-dev-server@4.0.0-beta.0
5) devServer: {
static: true
}

успехов...

Comments

[Tolmax]

Подскажите пож в какую именно строку надо добавить
{
target: 'web'
}
мой код такой
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: '',
},
mode: 'development',
devServer: {
static: path.resolve(__dirname, './dist'),
open: true,
compress: true,
port: 8080
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: '/node_modules/'
},
{
test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
type: 'asset/resource',
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),

]
}