Webpack-dev-server: Is there a way to hot reloading clear console ?

[albttx]

When the code is hot reload, is there a chrome/firefox plugin or anything to show the seperation from the reload in the console ?

Or add something like console.log("--------------------------------------"); to separate them ?

[SpaceK33z]

You could hack into hot reload messages like this:

window.addEventListener('message', function onWebpackMessage (e) {
  // do something
});

[albttx]

Awesome ! It's perfectly work !

[tavurth]

Add this to your apps index.js:

// Clear after module reload
window.addEventListener('message', e => {
    if ('production' !== process.env.NODE_ENV) {
        console.clear();
    }
});

For example, this is part of my index.jsx entry point:

...

const render = Component => {
    ReactDOM.render(
        <Provider store={store}>
            <MuiThemeProvider className='full-size'>
                <Component />
            </MuiThemeProvider>
        </Provider>,
        document.getElementById('root')
    );
};

render(App);

if (module.hot) {
    module.hot.accept();

    window.addEventListener('message', e => {
        if ('production' !== process.env.NODE_ENV) {
            console.clear();
        }
    });
}

if (module.hot) will get culled out when we run production minification, and every time HMR reloads, we'll clear the console.

[szalapski]

This doesn't work right for me--it clears the console on any message. How can I get it to clear only on an HMR reload?

[alex3683]

@szalapski I'm using vue-cli and don't know if it changes something on the messages sent by the webpack-dev-server, but in my case this works:

window.addEventListener('message', e => {
  if (process.env.NODE_ENV !== 'production' && e.data && e.data.type === 'webpackInvalid') {
    console.clear();
  }
});

So the console will be cleared as soon as webpack detects the change (at least that's what I think webpackInvalid is used for ...).

[szalapski]

I don't appear to ever have "e.data". I have e.payload and e.source, and nothing in them seems to distinguish a HMR-reload event from any other.

[alex3683]

@szalapski Which version of the dev server are you running? Mine is the latest, 3.1.8.

[szalapski]

How do I find that? I don't see a "devServer" anywhere in my .js files. It's a basic web server, right? It appears I am not using it. Instead, I use HTTP.sys (since this is an ASP.NET Core site) with Webpack dev middleware. But, I'm not sure why the web server is related to this--maybe it is in the way the server communicates HMR events?

Maybe this is the wrong place to ask, but it is the only place on the web that seems to address it at all. I'll go ask on stackoverflow.

[szalapski]

This seemed to work better for me.

if (module.hot) {
    module.hot.accept() // already had this init code 

    module.hot.addStatusHandler(status => {
        if (status === 'prepare') console.clear()
    })
}

See also https://stackoverflow.com/a/53933757/7453 .