This article goes over how to set up webpack-dev-server.

Prerequisites

HTML:

<!-- index.html -->
<h1>Hello, World!</h1>
<script src="src/index.js"></script>

JavaScript:

// src/index.js
const h1 = document.querySelector('h1');
h1.innerText = 'Hello, webpack!';

Installed dependencies in package.json:

{
  "devDependencies": {
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
  }
}

Install

Install webpack-dev-server:

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

Your package.json will look like:

{
  "devDependencies": {
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Serve

Run the server with npx:

npx webpack serve

Or create an npm script:

{
  "scripts": {
    "start": "webpack serve"
  }
}

And start the server with:

npm start

Output:

> @ start path/to/project
> webpack serve

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from path/to/project
⚠ ｢wdm｣: asset main.js 149 KiB [emitted] [minimized] (name: main) 1 related asset

Open http://localhost:8080/ in the browser:

open http://localhost:8080/

Edit and save src/index.js:

// src/index.js
const h1 = document.querySelector('h1');
h1.innerText = 'Hello, webpack-dev-server!';

Refresh the page to see changes.