New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difference between `new webpack.HotModuleReplacementPlugin()` and `--hot`? #97

Closed
mysterycommand opened this Issue Jan 13, 2015 · 16 comments

Comments

Projects
None yet
8 participants
@mysterycommand

mysterycommand commented Jan 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Jan 13, 2015

Member

--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 }
Member

sokra commented Jan 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@mysterycommand

mysterycommand Jan 13, 2015

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?

mysterycommand commented Jan 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Jan 14, 2015

Member

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

Member

sokra commented Jan 14, 2015

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

@mysterycommand

This comment has been minimized.

Show comment
Hide comment
@mysterycommand

mysterycommand Jan 16, 2015

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

mysterycommand commented Jan 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Jan 17, 2015

Member

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 }
Member

sokra commented Jan 17, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pyrotechnick

pyrotechnick Feb 9, 2016

Contributor

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'

Contributor

pyrotechnick commented Feb 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@nodesocket

nodesocket May 7, 2016

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()
]

nodesocket commented May 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mqliutie

mqliutie May 20, 2016

@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 commented May 20, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@mqliutie

mqliutie May 20, 2016

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!

mqliutie commented May 20, 2016

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

This comment has been minimized.

Show comment
Hide comment
@laggingreflex

laggingreflex Jan 6, 2017

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

laggingreflex commented Jan 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@rachmann

rachmann Nov 1, 2017

I tried adding

hot: true

... nothing...

I tried adding

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

But then I get

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

ReferenceError: webpack is not defined

Help...

rachmann commented Nov 1, 2017

I tried adding

hot: true

... nothing...

I tried adding

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

But then I get

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

ReferenceError: webpack is not defined

Help...

@shellscape

This comment has been minimized.

Show comment
Hide comment
@shellscape

shellscape Nov 1, 2017

Contributor

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

Contributor

shellscape commented Nov 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@rachmann

rachmann Nov 1, 2017

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.

rachmann commented Nov 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@shellscape

shellscape Nov 1, 2017

Contributor

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

Contributor

shellscape commented Nov 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@rachmann

rachmann Nov 2, 2017

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

rachmann commented Nov 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@shellscape

shellscape Nov 2, 2017

Contributor

@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 🍻

Contributor

shellscape commented Nov 2, 2017

@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 🍻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment