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 }

[525c1e21-bd67-4735-ac99-b4b0e5262290]

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).