关于#webpack#的问题，如何解决？

Question

webpack5热更新，已经重新编译了，但是并没有刷新页面

const path = require('path')
//自动生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {

    target: "web",
    entry: path.resolve('app/index.js'),
    // entry: ['webpack/hot/only-dev-server', path.resolve('app/index.js')],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        //自动清理dist目录
        clean: true,
        //配合webpack-dev-middleware使用
        // publicPath: '/',
    },
    //设置为开发环境，会默认启动一些配置
    mode: 'development',
    //启用source map
    devtool: 'inline-source-map',
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './app'),
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.jsx|\.js$/,
                loader: "babel-loader",
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '开发环境',
            template: path.resolve('app/index.html')
        }),
        // new webpack.HotModuleReplacementPlugin(),

    ],
    devServer: {
        //页面构建失败不刷新页面
        hotOnly: false,
        client: {
            progress: true,
        },
        hot: true, //热加载
        open: true, //自动打开浏览器
        port: 3000 //本地服务器端口号
    }
};

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 告知 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
  webpackDevMiddleware(compiler, {
    // publicPath: config.output.publicPath,
    publicPath: '/',
  })
);

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ,具体如下：
您提供的代码中，没有引入webpack-dev-server，这可能是导致热更新不生效的原因。您可以尝试将以下代码添加到webpack配置中来使用webpack-dev-server：

devServer: {
  hot: true,
  port: 3000,
  contentBase: path.join(__dirname, 'dist'),
  watchContentBase: true,
},

另外，您可以尝试注释掉new webpack.HotModuleReplacementPlugin()这一行代码，因为在webpack5中，热更新默认是开启的，您可以不需要显式地配置它。如果您确实需要手动配置热更新，可以使用webpack-plugin-serve插件来代替webpack-dev-server。

---

如果以上回答对您有所帮助，望采纳～谢谢