Skip to main content

​
Installing webpack

This guide covers how to install webpack in your project.

​
Prerequisites

webpack requires Node.js version 10.13.0 or higher. Check your Node.js version with node -v.
Before installing webpack, make sure you have:
  • Node.js installed (version 10.13.0 or higher)
  • npm, yarn, or pnpm package manager
For most projects, we recommend installing webpack locally. This allows different projects to use different versions of webpack and makes your build reproducible.
1

Initialize your project

If you haven’t already, create a package.json file:
npm init -y
2

Install webpack and webpack-cli

Choose your preferred package manager:
npm install --save-dev webpack webpack-cli
webpack-cli is optional but recommended. It provides a command-line interface for running webpack and accessing helpful commands.
3

Verify installation

Check that webpack was installed correctly:
npx webpack --version
You should see the webpack version number (currently 5.105.4).

​
Global Installation

Global installation is not recommended for most use cases. It locks you to a specific version of webpack across all projects and can cause version conflicts.
If you need webpack available globally (for quick experiments or testing): 
npm install --global webpack webpack-cli
After global installation, you can run webpack directly from your terminal.

​
Version-Specific Installation

To install a specific version of webpack: 
npm install --save-dev webpack@5.105.4 webpack-cli

​
Installing Loaders and Plugins

Webpack’s power comes from its ecosystem of loaders and plugins. Install them as dev dependencies: 
# Example: Installing loaders for CSS and TypeScript
npm install --save-dev css-loader style-loader ts-loader

# Example: Installing common plugins
npm install --save-dev html-webpack-plugin mini-css-extract-plugin

​
Bleeding Edge Installation

The following npm package points to the latest development branch and may be unstable. Use at your own risk.
To install the latest development version directly from the repository: 
npm install --save-dev webpack/webpack#main webpack-cli

​
Verifying Your Installation

After installation, verify everything is set up correctly:
  1. Check webpack version: 
    npx webpack --version
  2. Check webpack-cli version: 
    npx webpack-cli --version
  3. View webpack help: 
    npx webpack --help

​
Package Scripts

Add webpack to your package.json scripts for easier access:
package.json
{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
    "build:prod": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack": "^5.105.4",
    "webpack-cli": "^6.0.1"
  }
}
Now you can run: 
npm run build        # Build with default configuration
npm run build:prod   # Build for production
npm run build:dev    # Build for development
npm run watch        # Watch for changes and rebuild

​
Next Steps

Now that webpack is installed, you’re ready to:

Quick Start Guide

Create your first webpack bundle

Configuration

Learn how to configure webpack
For production builds, consider installing terser-webpack-plugin (included by default in webpack 5) for JavaScript minification.