Webpack-hot-middleware：HMR连接但不热重装Vanilla JS

Question

我正在为Express + Webpack-Dev-Middleware + Webpack-Hot-Middleware + Vanilla JS设置一个简单的例子（我稍后会添加React），但它无法正常工作。

当我使用node server启动服务器时，我看到服务器正在监听3000并且webpack成功编译（见下文）：

$ node server
clean-webpack-plugin: /home/mmaza/www/personal/projects/hmr/public has been removed.
clean-webpack-plugin: /home/mmaza/www/personal/projects/hmr/public has been removed.
Example app listening on port 3000!
ℹ ｢wdm｣: Hash: 21775a3b93d90235225b
Version: webpack 4.9.1
Time: 807ms
Built at: 2018-05-28 11:33:35
     Asset       Size  Chunks             Chunk Names
 bundle.js   1.67 MiB    main  [emitted]  main
index.html  189 bytes          [emitted]  
Entrypoint main = bundle.js
[./client/assets/project01.png] 595 KiB {main} [built]
[./client/index.js] 386 bytes {main} [built]
[./client/index.scss] 1.17 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./client/index.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./client/index.scss 450 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/style-loader/lib/addStyles.js] 9.77 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {main} [built]
[0] multi ./client/index.js webpack-hot-middleware/client?http://localhost:3000 40 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client.js?http://localhost:3000] (webpack)-hot-middleware/client.js?http://localhost:3000 7.59 KiB {main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.23 KiB {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
    + 7 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  556 KiB       0  
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

在浏览器中我有这个：

[HMR] connected client.js?5835:92

当我更新文件client/index.js时（我只修改一个字符串），我在控制台中有这个：

$ node server
clean-webpack-plugin: /home/mmaza/www/personal/projects/hmr/public has been removed.
clean-webpack-plugin: /home/mmaza/www/personal/projects/hmr/public has been removed.
Example app listening on port 3000!
ℹ ｢wdm｣: Hash: 21775a3b93d90235225b
Version: webpack 4.9.1
Time: 807ms
Built at: 2018-05-28 11:33:35
     Asset       Size  Chunks             Chunk Names
 bundle.js   1.67 MiB    main  [emitted]  main
index.html  189 bytes          [emitted]  
Entrypoint main = bundle.js
[./client/assets/project01.png] 595 KiB {main} [built]
[./client/index.js] 386 bytes {main} [built]
[./client/index.scss] 1.17 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./client/index.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./client/index.scss 450 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/style-loader/lib/addStyles.js] 9.77 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {main} [built]
[0] multi ./client/index.js webpack-hot-middleware/client?http://localhost:3000 40 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client.js?http://localhost:3000] (webpack)-hot-middleware/client.js?http://localhost:3000 7.59 KiB {main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.23 KiB {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
    + 7 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  556 KiB       0  
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 9c5d661564500b568426
Version: webpack 4.9.1
Time: 243ms
Built at: 2018-05-28 11:41:49
                                  Asset       Size  Chunks             Chunk Names
   b9ca870352211d7772a9.hot-update.json   44 bytes          [emitted]  
                              bundle.js   1.67 MiB    main  [emitted]  main
main.21775a3b93d90235225b.hot-update.js   2.17 KiB    main  [emitted]  main
   21775a3b93d90235225b.hot-update.json   46 bytes          [emitted]  
                             index.html  189 bytes          [emitted]  
Entrypoint main = bundle.js main.21775a3b93d90235225b.hot-update.js
[./client/assets/project01.png] 595 KiB {main}
[./client/index.js] 388 bytes {main} [built]
[./client/index.scss] 1.17 KiB {main}
[./node_modules/ansi-html/index.js] 4.16 KiB {main}
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./client/index.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./client/index.scss 450 bytes {main}
[./node_modules/html-entities/index.js] 231 bytes {main}
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main}
[./node_modules/querystring-es3/index.js] 127 bytes {main}
[./node_modules/style-loader/lib/addStyles.js] 9.77 KiB {main}
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {main}
[0] multi ./client/index.js webpack-hot-middleware/client?http://localhost:3000 40 bytes {main}
[./node_modules/webpack-hot-middleware/client.js?http://localhost:3000] (webpack)-hot-middleware/client.js?http://localhost:3000 7.59 KiB {main}
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {main}
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.23 KiB {main}
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main}
    + 7 hidden modules
Child html-webpack-plugin for "index.html":
                                   Asset      Size  Chunks             Chunk Names
                              index.html   556 KiB       1             
    b9ca870352211d7772a9.hot-update.json  44 bytes          [emitted]  
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {1}
    [./node_modules/lodash/lodash.js] 527 KiB {1}
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {1}
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {1}
ℹ ｢wdm｣: Compiled successfully.

但是在浏览器中没有任何反应：

[HMR] connected client.js?5835:92

我正在遵循这些说明：

https://blog.cloudboost.io/live-reload-hot-module-replacement-with-webpack-middleware-d0a10a86fc80

但我无法让热重装正常工作。它只是简单地记录或记录任何内容。

文件：

client/index.js：

import projectImage from './assets/project01.png';
import './index.scss';

function component() {
    var element = document.createElement('div');
    element.innerHTML = "Hello world with middleware with hot reload!!!";

    var testImage = new Image();
    testImage.src = projectImage;
    element.appendChild(testImage);

    return element;
}
document.body.appendChild(component());

server/index.js：

const express = require('express');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config');
const webpackMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const app = express();

// Static files
app.use(express.static('public'));

// Webpack Middleware
app.use(webpackMiddleware(webpack(webpackConfig),{
  publicPath: webpackConfig.output.publicPath
}));

// Webpack Hot Middleware
app.use(webpackHotMiddleware(webpack(webpackConfig),{
  path: webpackConfig.output.publicPath
}));

// Start up
app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
});

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const public = path.resolve(__dirname, 'public');

module.exports = {
    entry: [
      './client/index.js',
      'webpack-hot-middleware/client?http://localhost:3000',
    ],
    mode: 'development',
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, public),
    },
    module: {
      rules: [
        {
          test: /\.(css|scss|sass)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(woff|woff2|ttf|eot|svg|jpg|png|gif)$/,
          use: [
            {
              loader: 'url-loader'
            }
          ]
        }
      ]
    },
    plugins: [
        new CleanWebpackPlugin([public]),
        new HtmlWebpackPlugin({
            title: 'React from scratch'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

package.json：

{
  "name": "hmr",
  "version": "1.0.0",
  "description": "HMR-React-Sass",
  "main": "index.js",
  "scripts": {
    "dev": "node server",
    "build": "webpack --mode production",
    "lint": "./node_modules/.bin/eslint --init",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "HMR-React-Sass"
  ],
  "author": "Marco Maza",
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.2"
  }
}

您可以使用此回购重现此问题：

https://gitlab.com/marcomaza92/playground

非常感谢您的帮助！