Introduction to [email protected]

Let’s say you have a simple webpage:

<!-- index.html -->
    <script src="bundle.js"></script>

With the script generated by webpack:

// main.js
console.log('hello world');
// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'

Wouldn’t it be nice to set up automatic page refresh/reload during development?

With webpack-dev-server, this can be done.


Install webpack-dev-server and webpack:

Run Server

The quickest way to start the server is to run the local binary:

$ node_modules/.bin/webpack-dev-server
# if it's installed globally, you can run `webpack-dev-server`

You should be able to view the page on http://localhost:8080/webpack-dev-server/.

Additionally, you can create an npm script for convenience:

  "scripts": {
    "start": "webpack-dev-server"

This allows you to start the server with:

$ npm start


Now if you edit main.js and save the file:

// main.js
console.log('Hello, world!');

You should get that log in your browser console.

Please support this site and join our Discord!