webpack-dev-server (WDS)

So far we have been verifying our changes, that we made to our code locally on the system, by manually opening the index.html in the browser and manually refreshing it after every change. This is a bit of pain, every time refreshing the browser after any minor or major change.

It would be nice if the browser could refresh by itself whenever we make and save any change to our code.

Also, later, when we integrate data layer to our app and start making any ajax calls, manually opening the html file in the browser from file system won’t work, the ajax request to any data service/REST server would be rejected because of CORS.

For this reason, we need a web-server to serve our application locally on some port on localhost.
We can either install nginx or node’s http-serve or any other web-server, or local IIS server that comes bundled with windows and serve our application from the installed server.

Or webpack also has its own web server called webpack-dev-server(WDS), specifically provided to be used on development machines. It has some additional advantage for webpack-based applications, like inline mode and Hot module reloading.

So, lets install the webpack-dev-server and use it to serve our application on localhost:

1. Install webpack-dev-server

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

2. In the webpack.config.js, add the configuration for webpack-dev-server:

The webpack-dev server needs absolute path to our application package and index files, for this we will use the node’s path module to specify absolute path of our content-base folder to webpack.

Notice the new property ‘devServer’ we added to the webpack.config (line#15). This specifies the settings for the webpack-dev-server:

contentBase : this specifies base folder from where the dev-server would serve the application and its contents
port: on what port the localhost server is to be spun.

Also note the changes of the removal of relative path from all the filename properties (in output.filename and also in each HtmlWebpackPlugin instance). Now the file-path is specified as absolute path via a path property. For this we imported node’s path module in the file (line#4)

3. In package.json, update our npm start script to use webpack-dev-server command instead of webpack command :

4. Delete all the files under ./dist folder
5. Run npm startfrom the cli this time to run webpack-dev-server

(click on image to see in expanded popover view)

6. As can be seen above in the output of npm start command, the webpack-dev-server has started the web server at http://localhost:9000/

7. Open the urls http://localhost:9000/index.html and http://localhost:9000/settings.html in browser windows and we should see the pages working as expected:

(click on image to see in expanded popover view)

In-memory creation of the files

If you had deleted all your files inside dist folder earlier, you will notice that with webpack-dev-server, our bundled files are not any longer getting created in the dist folder.
This is because, WDS creates and serves the files from the memory.

In the next lesson, we’ll learn about the hot-module-replacement feature of webpack, one of the most significant benefit of webpack.

[ Prev: Common Chunks] [ Next: Hot Module replacement ]