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

}

Venlo

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`
    ]
}

Kiesha

Not much luck with that one: Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:8080' in '/Users/jono/dev/recipist' – Venlo

Answer 2

Did you set the devServer properties in your webpack.config.js file?

devServer: {
    ...
    historyApiFallback: true,
    hot: true,
    inline: true,
    compress: true,
    ...
},
plugins: [
     new webpack.HotModuleReplacementPlugin(),
     ...
],
...

package.json

"scripts": {
    "development": "webpack-dev-server --progress --colors"
}

Kiesha

Just tried adding that, but it didn't change the result. I assume the flags I was passing into the webpack-dev-server command were doing the same thing. – Venlo