vue.jswebpack-hmrhot-module-replacementwebpack-dev-middleware

How can set up my Vue.js site to clear the browser's Javascript console on every hot reload event?


I have a Vue.js site with Webpack Dev Middleware (served via an ASP.NET Core site by HTTP.sys web server, though I'm guessing that doesn't matter). Does anyone know how I can set up my site to clear the browser's Javascript console on every hot reload event?

Here's the only related link I can find, but it seems to be for a web server I am not using. I'm not sure why the particular web server would matter.


Solution

  • In my main app .js file:

    if (module.hot) {
        module.hot.accept() // already had this init code 
    
        module.hot.addStatusHandler(status => {
            if (status === 'prepare') console.clear()
        })
    }
    

    That got it to work consistently for me.

    See also https://webpack.js.org/api/hot-module-replacement/#addstatushandler .