Introduction to webpack-dev-server

Webpack-dev-server is an essential development tool that serves a webpack app and provides live reloading capabilities. This allows developers to see their changes in real-time without the need to manually refresh the page.

Installation

To install webpack-dev-server, use the following command:

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

Basic Configuration

Configure webpack-dev-server in the webpack.config.js:

  
    const path = require('path');
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
      },
    };
  

APIs and Options

Webpack-dev-server comes with numerous configuration options that provide extensive control:

contentBase

Specifies the directory from which to serve static files:

  
    devServer: {
      contentBase: path.join(__dirname, 'public'),
    },
  

compress

Enable gzip compression for everything served:

  
    devServer: {
      compress: true,
    },
  

port

Specify the port number for the server:

  
    devServer: {
      port: 8080,
    },
  

hot

Enable Hot Module Replacement (HMR):

  
    devServer: {
      hot: true,
    },
  

open

Automatically opens the browser when the server starts:

  
    devServer: {
      open: true,
    },
  

proxy

Proxying URLs to external services:

  
    devServer: {
      proxy: {
        '/api': 'http://localhost:3000',
      },
    },
  

historyApiFallback

Fallback to a specified page in Single Page Applications (SPAs):

  
    devServer: {
      historyApiFallback: true,
    },
  

App Example

Here’s a simple app example utilizing the configurations:

  
    // webpack.config.js
    const path = require('path');
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        hot: true,
        open: true,
        proxy: {
          '/api': 'http://localhost:3000',
        },
        historyApiFallback: true,
      },
    };

    // src/index.js
    import './style.css';
    import printMe from './print.js';

    function component() {
      const element = document.createElement('div');
      const btn = document.createElement('button');
      element.innerHTML = 'Hello webpack';
      btn.innerHTML = 'Click me and check the console!';
      btn.onclick = printMe;
      element.appendChild(btn);
      return element;
    }

    document.body.appendChild(component());

    // src/print.js
    export default function printMe() {
      console.log('Button clicked!');
    }

    // src/style.css
    body {
      background: #e0f7fa;
      color: #00695c;
    }
  

With this setup, you can quickly develop and see your changes instantly with webpack-dev-server’s live reloading and HMR features.

For more information, refer to the official webpack documentation.

Hash: 85356624c1363ebb9b258e300ab8b72a266441fbbf1930ba84c37b570bbed573