Introduction to webpack-dev-server@1

Let’s say you have a simple webpage:

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

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.

$ npm install [email protected] [email protected]

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.

Introduction to [email protected]