@webpack-cli/serve

What is @webpack-cli/serve?

The @webpack-cli/serve package is a command line interface tool that allows you to quickly serve your webpack projects. This package integrates with webpack-dev-server to provide a development server with live reloading and custom server configurations, enhancing the development experience by enabling hot module replacement and efficient development workflows.

What are @webpack-cli/serve's main functionalities?

Starting a development server

This command starts a development server using the configuration specified in 'webpack.config.js'. It automatically compiles your app as you make changes to the files, providing a live development environment.

npx webpack serve --config webpack.config.js

Custom server configuration

This code snippet shows how to customize the webpack development server by setting a specific port, automatically opening the browser after server starts, and setting up a proxy for API requests.

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

Enabling Hot Module Replacement (HMR)

This configuration enables Hot Module Replacement (HMR), which allows modules to be updated in the browser without requiring a full refresh, maintaining the state of the application.

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

Other packages similar to @webpack-cli/serve

webpack-dev-server

webpack-dev-server is a more direct package that provides a development server for webpack. It is often used directly or integrated into other tools like @webpack-cli/serve. It offers similar functionalities such as live reloading and HMR, but is used more directly for server configurations.

browser-sync-webpack-plugin

This package integrates BrowserSync with webpack, offering a feature set that overlaps with webpack-dev-server and @webpack-cli/serve, such as live reloading. BrowserSync is particularly useful for testing an application across multiple devices.

serve

While not specific to webpack, 'serve' is a static server package that can be used to serve a webpack-built application. It lacks the deep integration and HMR capabilities of @webpack-cli/serve but is suitable for simpler, static serving purposes.

README

webpack-cli serve

Note

This package is used by webpack-cli under-the-hood and is not intended for installation

Description

This package contains the logic to run webpack-dev-server to serve your webpack app and provide live reloading.

Installation

npm i -D webpack-cli @webpack-cli/serve

Usage

CLI (via webpack-cli)

npx webpack-cli serve

Options

Checkout SERVE-OPTIONS-v4.md or SERVE-OPTIONS-v5.md to see list of all available options for serve command for respective webpack-dev-server version.