webpack-dev-server

(★ 7,848)

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

Owner Repos

webpack ★ 65,971

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

JavaScript
webpack-bundle-analyzer ★ 12,660

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

JavaScript
mini-css-extract-plugin ★ 4,663

Lightweight CSS extraction plugin

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
sass-loader ★ 3,892

Compiles Sass to CSS

JavaScript
tapable ★ 3,862

Just a little module for plugins.

JavaScript

File Explorer

ZIP Download
  • .cspell.json
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .npmrc
  • .prettierignore
  • .versionrc
  • babel.config.js
  • CHANGELOG.md
  • CODE_OF_CONDUCT.md
  • commitlint.config.js
  • CONTRIBUTING.md
  • DOCUMENTATION-v4.md
  • eslint.config.mjs
  • LICENSE
  • lint-staged.config.js
  • migration-v4.md
  • migration-v5.md
  • migration-v6.md
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.client.json
  • tsconfig.json

# Installation Guide

node
Prerequisites

Setup Steps

npm install

Install project dependencies.

npx webpack serve

Run the development server.

Key Commands

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

Install webpack-dev-server as a dev dependency.

npx webpack serve

Run the webpack dev server with live reloading.

This should be used for development only.

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Link
Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

npm install

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

npm run

View Details ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

🔍

npx

View Details ▼

This command is an alias of `npm exec`.

tldr npm exec

View documentation for the original command:

🔍

pnpm

View Details ▼

Fast, disk space efficient package manager for Node.js.
Manage Node.js projects and their module dependencies.

pnpm init

Create a `package.json` file:

pnpm {{[i|install]}}

Download all the packages listed as dependencies in `package.json`:

pnpm add {{module_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

🔍

webpack

View Details ▼

Bundle a web project's js files and other assets into a single output file.

webpack {{app.js}} {{bundle.js}}

Create a single output file from an entry point file:

webpack {{app.js}} {{bundle.js}} --module-bind '{{css=css}}'

Load CSS files too from the JavaScript file (this uses the CSS loader for CSS files):

webpack {{[-c|--config]}} {{webpack.config.js}} --progress

Pass a configuration file (with e.g. the entry script and the output filename) and show compilation progress:

🔍

yarn

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

// repository documentation