Konnor's Blog

JS - How to configure webpack-dev-server live-reloading

October 10, 2019

Quick Start

Reference Repository

npm init # if it's a new project
npm install webpack webpack-cli webpack-dev-server

Add the following configuration in your root directory and it will allow for live reloading as well as automatically opening the default browser

Reference Webpack Config

// webpack.config.js
const path = require("path")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
devServer: {
open: true,
publicPath: "",
contentBase: path.resolve(__dirname, "dist"),
watchContentBase: true,
compress: true,
},
}

Then running npx webpack-dev-server will automatically open the default web browser and allow automatic browser refreshing on file changes.

In depth explanation

Alright, so there’s a few assumptions when creating this configuration.

File structure:

dist/
|-- style.css
|-- index.html
src/
|-- index.js
// dist/index.html
<html lang="en">
<head></head>
<body>
<!-- Name of your webpack bundle -->
<script src="./bundle.js"></script>
</body>
</html>

It is important that the script you source, <script src="./bundle.js></script>" is the same path as what is output by webpack in your webpack.config.js file

// Resolves to './dist/bundle.js'
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},

This is important because webpack-dev-server saves your new bundle into memory and does not actually build a new bundle.js in your dist/ directory.

DevServer configuration

// webpack.config.js
module.exports = {
// Above code omitted for brevity
devServer: {
open: true, // Tells webpack-dev-server to open your default browser
publicPath: "", // Where your webpack bundle will be sent to
contentBase: path.resolve(__dirname, "dist"), // Where your static files are, ie: index.html
watchContentBase: true, // Enable live-reloading
compress: true, // no real significance here
},
}

Alright, lets go through line by line

  • open: true : Tells webpack-dev-server to automatically open the browser to the path provided by contentBase.

  • publicPath: "" : This tells webpack where to send the bundle to. In this case, just set it to the current directory. This is prepended to

output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
}

So if publicPath was set to "dist/", then in that case, your bundle.js file would be in ./dist/dist/bundle.js instead of ./dist/bundle.js. Yes, it’s confusing. I know, it tripped me up for a while.

  • contentBase: path.resolve(__dirname, "dist") : This tells webpack-dev-server what files to watch. This should be where your static files are. IE: index.html, style.css, etc.., basically, anything that webpack does not touch when bundling.

  • watchContentBase: true : This enables live-reloading, this auto-refreshes the browser.

In my Tic Tac Toe Repo I see the following output:

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/krog/odin-project/javascript/TicTacToeJS/dist
### Below code omitted

This is telling me, if I open up http://localhost:8080 it will automatically display '/index.html' for me. Webpack output is set to /bundle.js Both files will have dist/ prepended to them because that is the directory that we are opening.

Yes. I know. Confusing.

Play around with my repo, play with the config. Read the webpack-dev-server documentation. Eventually it will click. Best of luck learning webpack!

If you have any questions feel free to email me: Konnor7414@gmail.com


Written by Konnor Rogers who currently works as a paramedic looking to transition into becoming a full time software developer. You should follow him on Twitter