Webpack Hot Module Replacement always doing full page reload with PHP built-in server

Question

I am trying to use Webpack Hot Module Replacement for my CSS.

I run the PHP built-in server (php -S localhost:8000 -t .) to load the following index.php file, which is at the root of my project :

<!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>

Then I want to use webpack-dev-server and its Hot Module Replacement feature to see my CSS changes everytime I save my CSS files.

Here is my 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"
          }
        ]
      }
    ]
  }
};

Here is my ./src/app.js :

import "./app.css";

Here is my ./src/app.css :

body {
  background-color: #fff;
}

I am starting the webpack-dev-server by typing : ./node_modules/.bin/webpack-dev-server --hot.

The problem is that instead of hot reloading the CSS, it always does a full page reload.

Here is what is printed in my brower's console :

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)

Following these logs, the problem is that it searches the updates informations on localhost:8000/8f2d15bbf1ed4e8f7e63.hot-update.json, which is obviously not found because it is my PHP server (8000 port). But I don't know why webpack-dev-server is trying to reach localhost:8000 since it is running on localhost:8080 by default and I didn't overwrite anything.

I am running [email protected] and [email protected].

Does anybody encountered the same problem and found a solution ?

Thanks.

JJPandari JJPandari · Accepted Answer · 2018-01-04T07:34:17

I'm using the scripts generated by vue-cli(the official scaffolding tool for vue.js)(this template specifically), and ran into this problem. Somehow

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

just does full reloads all the time, when I change it to what I used in another working project

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

the hot reload is fine.

The related parts in 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)

in 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 Hot Module Replacement always doing full page reload with PHP built-in server

1 Answers