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.
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 .
your link contains the response for your question. Just add in your main.js file:
window.addEventListener('message', (e) => {
if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {
console.log('hot reload happened')
console.clear()
}
})
Example of a complete main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
window.addEventListener('message', (e) => {
if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {
console.log('hot reload happened')
console.clear()
}
})
EDIT: I didn't read your answers to the github issue. Could you provide some kind of JSON.stringify(e) on your event message on multiple events so we can check what you have?