webpack-dev-server 热更新，已重新编译但未生效

Question

webpack-dev-server 相关配置代码：

const webpack = require('webpack');
const webpackConfig = require('./webpack.dev.config.js');
const webpackDevServer = require('webpack-dev-server');
const pathConfig = require('./config/path.config.js');
const ora = require('ora');
const open = require('open');

const spinner = ora('start server...');
spinner.start();

const host = '0.0.0.0';
const port = 3636;
const serverAddr = `http://${host}:${port}`;

for (item in webpackConfig.entry) {
    webpackConfig.entry[item] = [`webpack-dev-server/client?${serverAddr}/`, webpackConfig.entry[item]];
}

var server = new webpackDevServer(webpack(webpackConfig), {
    contentBase: pathConfig.build,
    publicPath: '/',
    inline: true,
    hot: true,
    compress: true,
    watchContentBase: false,
    stats: {
        colors: true
    }
});

server.listen(port, host, function() {
    spinner.stop();
    console.log('start server success...');

    // 打开浏览器
    open(serverAddr);
});

问题描述：

当我修改文件（html, css, js 文件），webpack 输出 webpack: Compiled successfully. 说明已经重新编译了。
浏览器控制台输出下面 log ，但是就是浏览器内容没有更新。手动刷新之后才能更新

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...

如果改配置 hot: false 则可以自动刷新，但是是整个页面刷新不是我想要的结果。纠结~

Answer 1

可能是因为你已经webpack打包编译过了

Answer 2

你是vue还是react？webpack好像只能做到检测到变化之后刷新整个页面，如果要局部刷新需要配合特定的loader来处理

Answer 3

配置更改之后可以检测到 js、scss 更改并自动刷新，但是修改 html 文件仍未能检测到修改并刷新浏览器。 经过搜索发现有的地方提到是因为该 html 不是入口文件，或者该 html 文件未被引用。 然而我在 js 文件中 require 某个 html 文件，然后修改就可以检测到。但是觉得这不是最终的解决办法。

原配置：

for (item in webpackConfig.entry) {
    webpackConfig.entry[item] = [`webpack-dev-server/client?${serverAddr}/`, webpackConfig.entry[item]];
}

修改后配置：

for (item in webpackConfig.entry) {
    webpackConfig.entry[item] = ['webpack/hot/dev-server', `webpack-dev-server/client?${serverAddr}/`, webpackConfig.entry[item]];
}