How to JavaScript? (or yet another JavaScript guide) Part 4 - webpack-dev-server

Previously in Part 3, we talked about linting, what it is, and how we can integrate it in our workflow via webpack. Today we’ll be talking about webpack-dev-server, how it can help us and how simple it is to set it up for our project, so let’s begin!

For context, let’s recap how we would currently do work in our project:

First - edit some code;

Second - run the build script;

Third - refresh browser to see the changes.

Simple and nothing too complicated, but it can be improved, and we can do it using webpack-dev-server. As the name implies, webpack-dev-server is a server which will serve our code according to the webpack configuration. Not only that, it will automatically rebuild our code when we save a file, and it will also automatically refresh our browser on each rebuild, awesome right?! So what do we need to make this work? First we install it:

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

After installing open package.json, edit scripts to add the following start command:

“scripts”: {
  “start”: “node_modules/.bin/webpack-dev-server --progress”,
  // ...

And… Before proceeding any further, since we won’t be needing the index.html in its current form we will perform some clean up and just delete it.

So with these 3 simple steps we’re pretty much done! Now just start your server by running:

$ npm start

Note that we won’t need to write npm run start, this is because npm recognizes start as a script command name, and run is needed for custom script command names that npm doesn’t recognize, like build or clear. Now if everything went fine you should see something like this:

Server is up and running!

After starting the server, point your browser to http://localhost:8080/webpack-dev-server/bundle and voila, we should now see our page (this is possible because the server automatically loads the bundled file for us)! Now keep the browser open, and try editing src/index.js (for example, change “hello world!” to “hello universe!”) and save it, your browser should automatically be updated with the new code. Also, since our webpack is configured to lint our code, these automatic builds will also lint it (try writing invalid code and saving the file to see what happens). Honestly, how cool is that?!

And that’s it for today. This article was short and ended up being very trivial to set up (in the context of our project), but I feel that it’s an important peace on making everything work nicely together.

Today’s code is shared here.

Thanks for reading!

PS: Link to Part 5