Javascript Webpack热中间件：HMR已连接但未热重新加载_Javascript_Express_Webpack

Javascript Webpack热中间件：HMR已连接但未热重新加载

javascript express webpack

Javascript Webpack热中间件：HMR已连接但未热重新加载,javascript,express,webpack,Javascript,Express,Webpack,我正在为Express+Webpack开发中间件+Webpack热中间件+Vanilla JS（我将在后面添加React）建立一个简单的示例，但它不能正常工作当我使用节点服务器启动服务器时我看到服务器正在收听3000，并且网页包编译成功（见下文）：在浏览器中，我有以下内容： [HMR] connected client.js?5835:92 当我更新文件client/index.js（我只是修改了一个字符串）时，控制台中有以下内容： $ node server clean-webpack-

我正在为Express+Webpack开发中间件+Webpack热中间件+Vanilla JS（我将在后面添加React）建立一个简单的示例，但它不能正常工作

当我使用

节点服务器启动服务器时

我看到服务器正在收听

，并且网页包编译成功（见下文）：

在浏览器中，我有以下内容：

[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

我遵循这些指示：

但我无法让热重新加载工作。它只是简单地做或者什么都不记录

档案：

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());

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!')
});

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()
    ]
};

server/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());

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!')
});

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()
    ]
};

webpack.config.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());

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!')
});

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"
  }
}

您可以使用此回购来复制发行：

非常感谢你的帮助

您可能不需要单独使用

express

。使用

webpack dev server

@brk这正是我要避免的，使用

webpack dev server

，因为我希望对服务器端有更多的控制：）