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

npm install webpack-dev-server -g

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

webpack-dev-server

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

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /path/to/your/files
Hash: b9af11d6ad3b3743b572
Version: webpack 1.12.2
Time: 572ms
    Asset    Size  Chunks             Chunk Names
output.js  299 kB       0  [emitted]  main
chunk    {0} output.js (main) 297 kB [rendered]
    [0] ./main.js 197 bytes {0} [built]
    [1] ./styles.css 898 bytes {0} [built]

Now you can navigate to the running site: 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

webpack-dev-server --inline

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