Development Server (Dev Server)

webpack-dev-server provides you with a rudimentary web server and the ability to use live reloading or Hot Module Replacement (HMR). It doesn't write any output files to the physical file system after compiling. Instead, it holds the bundled files in memory and serves them, making compilation and builds significantly faster.

Installation

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

webpack.config.js Setup

const path = require('path');

module.exports = {
  // ... omitted ...
  devServer: {
    static: './dist', // The directory to serve static files from
    hot: true,        // Enable Hot Module Replacement (HMR)
    port: 3000,       // Port number for the server
    open: true,       // Automatically open the browser
    compress: true,   // Enable gzip compression
    historyApiFallback: true, // Render index.html for 404 responses in SPAs
  },
};

Executing the Script

You can easily run the development server by adding a script to your package.json file.

{
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
  }
}

Now, when you run npm run start in your terminal, the web browser will automatically refresh whenever the source code is modified.