Question

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

我运行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。

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

感谢。

Answer 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()
  }
})

Answer 2

查看我的GitHub存储库：

https://github.com/Tech-Nomad/wordpress-php-vue-webpack-hot-module-replacement-hmr-starter-setup

您将找到一个适用于WordPress主题的完全正常运行的Webpack入门设置。

我在那里使用了webpack.config.js而不是vue-cli配置，因为我收到了Web套接字代理错误。另一方面，本机webpack配置执行HMR，而此设置没有任何问题。

Webpack热模块替换总是使用PHP内置服务器进行整页重新加载

2 个答案: