Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

}

like image 463
jonofan Avatar asked Nov 08 '22 02:11

jonofan


1 Answers

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`
    ]
}
like image 146
Mathieu Decoene Avatar answered Nov 14 '22 21:11

Mathieu Decoene