Using the webpack dev server

Standard

A great feature of Webpack is has a build in webserver for testing your application. It will monitor your files for changes and rebuild. This is similar to watch mode that can be enabled during configuration. However, the dev server expands on that by providing a localhost 8080 port address and automatic refreshing of the view when content changes.

First, install the webpack-dev-server globally

To start the server, navigate to your file directory and type the command:

This will start the server, output should look similar to below.

Now you can navigate to the running site: http://localhost:8080/webpack-dev-server/

http://localhost:8080/webpack-dev-server/

http://localhost:8080/webpack-dev-server/

Notice the bar that says “app ready”. This is the status bar that webpack has put into the browser. This does have HTML placed on the page using an iFrame. At some point you will not want this on your application, but for simple senario’s this is fine.

To remove the status bar, navigate your browser to the base url (http://localhost:8080/). Downside to this is that now the browser is not automatically refreshed when files are modified. To enable watch mode and auto refreshing on the dev server, specify the inline tag

Now content will automatically refresh without that pesky status bar in the way. Happy web packing!