Webpack Dev Server

Technology 3 10 Saransh Kataria

Webpack has become the most talked thing recently for all front end developers. Most starter kits today are using Webpack or the webpack Dev Server somewhere inside them. To know more about Webpack, you can check the Introduction to Webpack post I wrote. Webpack Dev Server is a nodeJS server that has some extra functionalities which help developers writing front end code. So it essentially is Webpack and a wrapper which acts as a development web server, serving our code files using HTTP. The extra functionalities include live reloading, watch mode and hot module replacement which are some awesome capabilities making life as a developer so much easier. For reading more about how to use and setup a webpack dev server, you can read my post about webpack dev server. That should help you get set up, have a configuration up and running in a jiffy and reap all the benefits of the server.

Webpack dev server uses the webpack dev middleware to serve a webpack bundle. For getting started, you need to install it via npm first. You then need to add a config file with the following configuration:

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000

And that should set you up