webpack-dev-server

What is webpack-dev-server?

webpack-dev-server is a development server that provides live reloading. It is intended to be used with webpack, a module bundler. It uses webpack's watch mode and, when changes are detected, it recompiles the bundle and notifies the client to reload the page.

What are webpack-dev-server's main functionalities?

Live Reloading

Automatically reloads the page when files are changed. The 'hot' option enables Hot Module Replacement without page refresh as fallback in case of build failures.

module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

Custom Middleware

Allows developers to add custom routes before the server starts. Useful for mocking an API or other custom server logic.

module.exports = {
  devServer: {
    before: function(app, server) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }
};

Proxying API Requests

Redirects API calls to another server. This is useful when you have a separate API backend development server and you want to send API requests on the same domain.

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

HTTPS Support

Allows serving the webpack application over HTTPS. This is useful for testing applications that require secure connections.

module.exports = {
  devServer: {
    https: true
  }
};

Other packages similar to webpack-dev-server

browser-sync

BrowserSync is an automation tool that makes web development faster. It synchronizes file changes and interactions across multiple devices. It's similar to webpack-dev-server but works across multiple browsers and devices.

lite-server

Lite-server is a lightweight development server that serves a web app, opens it in the browser, and refreshes the browser on file changes. It is built on top of BrowserSync and provides fewer configuration options compared to webpack-dev-server.

serve

Serve is a static server that lets you serve static files quickly. It is simpler than webpack-dev-server and does not have built-in support for live reloading or module bundling.

http-server

http-server is a simple, zero-configuration command-line HTTP server. It is powerful and has the ability to serve static files, but lacks the advanced features of webpack-dev-server like live reloading and module hot replacement.

README

webpack-dev-server

THIS SERVER SHOULD ONLY USED FOR DEVELOPMENT!

DO NOT USE IT IN PRODUCTION!

What is it?

It's a little server using webpack-dev-middleware to serve a webpack app.

It also uses socket.io to update the browser if the bundle has changed (and to display compilation errors).

You need to pass a web app entry point, and you can also pass a html page to display and webpack options.

Inspiration

This project is heavily inspirated by peerigon/nof5.

Usage (command line)

webpack-dev-server <webpack entry point>

Options:
  --content-page  A html page to load  [string]
  --content-url   A url to load        [string]
  --options       webpack options      [string]
  --port          The port             [number]

Usage (javascript)

var Server = require("webpack-dev-server");
var options = {
	content: absoluteFilenameToContentHtmlPage,
	// Content page to display
	// it will default to a simple page

	contentUrl: "http://...",
	// if set it will load this URL as content page
	// it will default to undefined

	middleware: {
		// webpack-dev-middleware options
	},

	webpack: {
		// webpack options
		// ...
		watch: true // recommended

		/* defaults:
		output: "bundle.js",
		debug: true,
		filenames: true,
		watch: true
		*/
	}
};
new Server(entryPoint, options).listen(port[, host]);

entryPoint should be an absolute path. It may be prefixed with loaders.

Contributing

The client scripts are build with npm run-script postinstall.

Lisence

Copyright 2012 Tobias Koppers

MIT