Webpack Hot Module Replacement 总是使用 PHP 内置服务器重新加载整个页面答案

【问题标题】：Webpack Hot Module Replacement always doing full page reload with PHP built-in serverWebpack Hot Module Replacement 总是使用 PHP 内置服务器重新加载整个页面
【发布时间】：2017-08-17 14:33:41
【问题描述】：

我正在尝试对我的 CSS 使用 Webpack 热模块替换。

我运行 PHP 内置服务器 (php -S localhost:8000 -t .) 来加载以下 index.php 文件，该文件位于我的项目的根目录中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test webpack</title>
  </head>
  <body>
    <h1>Hello world</h1>

    <script src="http://localhost:8080/app.js"></script>
  </body>
</html>

然后我想使用webpack-dev-server 及其热模块替换功能来查看我每次保存 CSS 文件时的 CSS 更改。

这是我的webpack.config.js：

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    path: path.join(__dirname, "assets"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }
};

这是我的./src/app.js：

import "./app.css";

这是我的./src/app.css：

body {
  background-color: #fff;
}

我正在通过输入 webpack-dev-server 开始：./node_modules/.bin/webpack-dev-server --hot。

问题在于，它总是重新加载整个页面，而不是热重新加载 CSS。

这是我浏览器控制台中打印的内容：

Navigated to http://localhost:8000/
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
GET http://localhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.json 404 (Not Found)
[HMR] Cannot find update. Need to do a full reload!
[HMR] (Probably because of restarting the webpack-dev-server)

根据这些日志，问题是它在localhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.json上搜索更新信息，显然找不到，因为它是我的PHP服务器（8000端口）。但我不知道为什么webpack-dev-server 会尝试访问localhost:8000，因为它默认在localhost:8080 上运行并且我没有覆盖任何内容。

我正在运行 webpack@3.5.5 和 webpack-dev-server@2.7.1。

有没有人遇到同样的问题并找到了解决方案？

谢谢。

【问题讨论】：

标签： webpack webpack-dev-server webpack-hmr

【解决方案1】：

我正在使用vue-cli(vue.js的官方脚手架工具)(this template specifically)生成的脚本，遇到了这个问题。不知何故

"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",

当我将其更改为我在另一个工作项目中使用的内容时，我会一直进行完全重新加载

"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.2",

热重载没问题。

dev-server.js中的相关部分：

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: false,
  heartbeat: 2000
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

在dev-client.js:

/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})

【讨论】：

我已更新到最新版本，此问题已修复。 “webpack”：“^4.41.5”，“webpack-cli”：“^3.1.2”，“webpack-dev-server”：“^3.10.1”，“webpack-hot-middleware”：“^2.25 .0", "webpack-merge": "^4.2.2"