webpack5热更新失效

Question

在使用webpack5的时候，使用webpack-dev-server后修改代码无法实现效果变化，如从 新增x 变为 新增xxx时，页面还是显示 新增x

代码

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

module.exports = {
    target: "web",
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        main: './src/index.js'
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist')
        },
        host: "localhost",
        port: 8080,
        hot: true,
        open: true
    },
    module: {
        rules: [
            {
                test: /\.jpg$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader'
                    'sass-loader'
                ]
            }
        ]
    },
    output: {
        publicPath: './',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        },
        new webpack.HotModuleReplacementPlugin()
    )]
}

// package.json
{
  "...",
  "scripts": {
    "webpack": "webpack",
    "start": "webpack serve",
    "dev": "webpack-dev-server --hot --open --port 8080 "
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-middleware": "^5.2.2",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "node-sass": "^6.0.1"
  }
}

// src/index.js
import './style.css'

var btn = document.createElement('button')
btn.innerHTML = '新增xxx'
document.body.appendChild(btn)
btn.onclick = function() {
    var div = document.createElement('div');
    div.innerHTML = 'item'
    document.body.appendChild(div)
}

目录

效果

1. 执行 npm start
2. 发现页面仍然为 新增x
3. 经检查 network 中并无 ws 连接
   

尝试过的方法

• 因为之前使用过 browserlist，将其移除后仍然不行
• 添加 target: 'web' 仍然不行

有大佬知道这是为啥吗，我也翻了官方教程，issue和网上文档，没有看到有效的解决办法

Answer 1

去掉 output 中的publicPath就好了。不过不知道这个的原理唉，有大佬知道这是为什么吗，是因为devServer会默认读取output 中的publicPath，因为devServer打包生成的文件是存放中内存中的，如果读取了output 中的publicPath后就会导致读取的是物理硬盘处的打包文件，这样才会导致无法及时更新吗？

Answer 2

webpack5的热更新已经更改了，可以看下这个文章:
https://segmentfault.com/a/11...