Let’s start by getting webpack-dev-server setup, by doing this we won’t need to keep running our build script to see the changes in the browser.

We’ll need to install the npm module:

npm install --save-dev webpack-dev-server

And change our build script to run this instead of webpack, at the same time I’m going to rename the command from build to dev:

"dev": "webpack-dev-server --config build/webpack.config.dev.js"

Running this now and the browser starts up on http://localhost:8080 and I can see my app. All with zero config! However, there’s a slight problem, if I change my App.vue to say “Good Evening San Dimas!” instead of “Hello World!” then the browser does not update.

If I check my console I can see the application is building so what is wrong? Well when we setup our index.html we hardcoded the path to our javascript, for hot module reloading to work we need to allow this path to be injected, that way the dev server can update the html to include the changes as and when they are made.

Go to the index.html and remove the script tag that points to dist/main.js, then install the html-webpack-plugin:

npm install --save-dev html-webpack-plugin

Now we need to add this to our webpack config file, so it ends up looking like this:

If you now run the application up you can change the message in App.vue and it is immediately reloaded in the browser window!

This is awesome, however we haven’t yet got true HMR, if you look in the browser devtools you can see that the whole page is refreshed when we make a change. To fix this we need to add one more piece of configuration:

'use strict' const webpack = require('webpack')

const { VueLoaderPlugin } = require('vue-loader')

const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {

mode: 'development',



entry: [

'./src/app.js'

], devServer: {

hot: true,

watchOptions: {

poll: true

}

}, module: {

rules: [

{

test: /\.vue$/,

use: 'vue-loader'

}

]

}, plugins: [

new webpack.HotModuleReplacementPlugin(),

new VueLoaderPlugin(),

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

})

]

}

With this in place you should be able to see the changes hot loaded into the page without refreshing, something like this: