Webpack-dev-server: Difference between `new webpack.HotModuleReplacementPlugin()` and `--hot`?

[mysterycommand]

I have a pretty simple webpack.config.js like this:

'use strict';

// var webpack = require('webpack');

module.exports = {
    devServer: {
        contentBase: './static',
        stats: {
            colors: true
        }
    },
    entry: [
        'webpack/hot/dev-server',
        './source/scripts/main.jsx'
    ],
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loaders: [
                    'react-hot',
                    'jsx?harmony'
                ]
            }
        ]
    },
    output: {
        filename: 'main.js',
        path: './build/js',
        publicPath: '/js/'
    }//,
    // plugins: [
    //     new webpack.HotModuleReplacementPlugin()
    // ]
};

My npm start is webpack-dev-server --config=./webpack.config.js --port=3000 --hot. If I remove --hot and uncomment the hot module replacement plugin from the above config, state is not preserved when modules are updated.

This might be an issue with react-hot-loader, but I couldn't find any documentation on the difference between --hot and the plugin method. Thought I'd ask before diving into source code.

[sokra]

--hot do the following stuff:

• adds the HotModuleReplacementPlugin
• with --inline it adds 'webpack/hot/dev-server' to every entry
• switches the webpack-dev-server into hot mode, which post messages instead of reloading the page. devServer: { hot: true }

[mysterycommand]

Okay, thanks for the quick feedback! Is there a "config" way to do what --inline does? Also, if I do devServer: { hot: true } I get a warning about deprecated configuration value (or something) … is it going away? What will replace it?

[sokra]

--inline adds webpack-dev-server/client?<webpack-dev-server url> to all entry points.

[mysterycommand]

Cool, thanks again for the quick feedback. So, now I have an npm script like:

webpack-dev-server --config=./webpack.config.js --port=3000 --inline --hot

… and a webpack.config.js like:

'use strict';

module.exports = {
    devServer: {
        contentBase: './static',
        stats: { colors: true }
    },
    entry: {
        'main': './source/scripts/main.jsx',
        'test': 'mocha!./test/manifest.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{ test: /\.jsx$/, loaders: [ 'react-hot', 'jsx?harmony' ]}]
    },
    output: {
        filename: '[name].js',
        path: './build/js',
        publicPath: '/js/'
    }
};

… so my question is, is there a way to achieve this result, but with an npm script like (all options/flags in the config):

webpack-dev-server --config=./webpack.config.js

[sokra]

yes:

in webpack.hot.config.js

• require the original webpack.config.js
• entry push 'webpack/hot/dev-server' and 'webpack-dev-webpack/client?http://localhost:8080'
• plugins push new webpack.HotModuleReplacementPlugin()
• add property devServer: { hot: true }

[pyrotechnick]

For what it's worth: I managed to get this all working using webpack-hot-middleware/client rather than 'webpack-dev-webpack/client?http://localhost:8080'

[nodesocket]

Confirmed that you have to do both. Add the hot: true property as well as include the plugin webpack.HotModuleReplacementPlugin(). When I didn't load the plugin, hot reloading did not work correctly.

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

[mqliutie]

@pyrotechnick
My webpack.config.js is :

entry: {
    app: ['./src/client/app.js'],
    vendor : ['angular']
}

And 'webpack.dev.config.js' is :

entry : {
    app : ['webpack/hot/dev-server','webpack-hot-middleware/src/client']
//  app : ['webpack/hot/dev-server','webpack-dev-webpack/src/client?http://localhost:3000']
},

And gulp.babel.js is :

webpackConfig = require('./webpack.config');
webpackDevConfig = require('./webpack.dev.config');

webpackConfig.entry.app =  webpackConfig.entry.app.concat(webpackDevConfig.entry.app)

new WebpackDevServe(webpackConfig,{
 contentBase: "src/client",
 hot : true,
 stats: {
    colors: true
 }
}).listen('3000','0.0.0.0',function(err){
 if(err) throw new gutil.PluginError ('webpack-dev-server', err);
})

It doesn't work well. When I modified index.html browser was not reloaded.
Can you help me?
Thanks

[mqliutie]

wow！！！
Although my contentBase is src/client ,
webpack-dev-webpack/client?http://localhost:3000 can't be replaced by webpack-dev-webpack/src/client?http://localhost:3000
It has an extra src.
It works！

[laggingreflex]

There's a typo propagating here: webpack-dev-webpack, it should be webpack-dev-server.

This works 'webpack-dev-server/client?http://localhost:3000' but I wanted to avoid the port. So this works too: 'webpack-dev-server/client?' with just a (but necessary) ? at the end (for some reason).

[rachmann]

I tried adding

hot: true

... nothing...

I tried adding

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

But then I get

C:\WebSites\ReactCoursewebpack.config.js:22
new webpack.HotModuleReplacementPlugin()
^

ReferenceError: webpack is not defined

Help...

[shellscape]

@rachmann that error means you haven't defined the webpack variable. that's JavaScript 101. if you need some resources on learning JS I'd be happy to shoot you some links if you ping me on twitter.

[rachmann]

ow - that was a dumb error on my part.. But is still didn't work. Infact, if I remove hot: true and the plugin and then just add watchContentBase: true it works perfectly.

[shellscape]

@rachmann glad you got the variable sorted. it should be noted that the issues here aren't support forums. I'd recommend heading to Stack Overflow and posting a question with more details on your setup.

[rachmann]

@shellscape Others have asked questions, but you only ask this of me? I love SO, but if you don't want to answer questions, then answer none.

[shellscape]

@rachmann thanks for the feedback, but you might be taking that a little too personally. we do our best to stay on top of issues when they diverge into support requests. I'd ask that you let that go so the thread can remain on topic. Cheers 🍻