没有自动重新加载页面，webpack-dev-server答案

【问题标题】：No autoreload page , webpack-dev-server没有自动重新加载页面，webpack-dev-server
【发布时间】：2021-05-16 19:46:02
【问题描述】：

一切正常，webpack-dev-server在文件更改后编译，但浏览器文件夹没有自动重新加载安装的软件包： "webpack": "^5.21.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2"

谢谢

webpack.config.js 中的代码


const path = require('path')
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

console.log(isDev)

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: {
        port: 3000,
        hot: isDev,
    },
***
    }
}

要启动的 NPM 脚本（使用 'start' 脚本）


"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack serve --hot --inline --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

尝试升级到 beta webpack-dev-server (v4)

【讨论】：