webpack-dev-server --hot vs HotModuleReplacementPlugin()

Question

With the following config, I have been able to get hot module replacement working with HotModuleReplacementPlugin(), but not by using --hot when running the webpack-dev-server. My question is, why?

Almost all recent guides to setting up hot module replacement use --hot, but it doesn't work for me.

var webpack = require("webpack");
var path = require("path");
 
const config = {
  entry: path.resolve(__dirname, 'app/index.js') ,
  output: {
    path: path.resolve(__dirname, 'output'),
    filename: 'bundle.js',
    publicPath: "static/"
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

};
 
module.exports = config;

I am referencing my code file like so.

<script src="static/bundle.js"></script>

I am running my server like so.

webpack-dev-server --inline --colors --progress

Version.

webpack-dev-server 2.3.0
webpack 2.2.1

With this setup, hot module loading is working correctly. If I remove the plugin, and run the server appending --hot (as I've seen in many examples), my hot module loading doesn't work. The server registers the change, the transpile happens, my webpage appears like it's reloading, but the content does not update.

I'm accessing through http://localhost:8080/webpack-dev-server/index.html

Structure looks like this + a node_modules directory.

.
├── app
│   └── index.js
├── index.html
├── output
│   ├── bundle.js
│   └── index.js
├── package.json
└── webpack.config.js

---

Update

Have also tried adding devServer to the webpack config, which has the same result.

devServer: {
compress: true,
publicPath: "http://localhost:8080/static/",
filename: "bundle.js",
hot: true,
inline: true

}

Answer 1

You might want to add this as well:

entry: {
    'app': [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        `${PATHS.SOURCE}/index.jsx`
    ]
}