Skip to content
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
Closed

Comments

@mysterycommand
Copy link

@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
Copy link
Member

@sokra 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
Copy link
Author

@mysterycommand 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
Copy link
Member

@sokra sokra commented Jan 14, 2015

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

@mysterycommand
Copy link
Author

@mysterycommand 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
Copy link
Member

@sokra 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
Copy link
Contributor

@pyrotechnick 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
Copy link

@nodesocket 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
Copy link

@mqliutie 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
Copy link

@mqliutie 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
Copy link

@laggingreflex 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
Copy link

@rachmann 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
Copy link
Contributor

@shellscape 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
Copy link

@rachmann 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
Copy link
Contributor

@shellscape 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
Copy link

@rachmann 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
Copy link
Contributor

@shellscape 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.