Skip to content
Get packs

Guide · Open source

How to use webpack: install, configure and bundle your JavaScript

Updated · written with AI from the project's own documentation and checked against our catalogue data

Webpack is a module bundler that combines your JavaScript files and the modules they import into a small number of bundle files a browser can load. It can also handle other resources such as CSS, images and JSON through loaders. This guide shows you how to install webpack, understand its core ideas and get a build running.

webpackwebpack/webpack · ★ 66k · MIT

Quick start

  1. 1Install webpack. Run npm install --save-dev webpack in your project folder, or use yarn add webpack --dev if you use yarn.
  2. 2Check Node.js. Make sure Node.js is installed. The README excerpt does not state a minimum version, so consult the official guides.
  3. 3Read the Get Started guide. Open the official webpack Get Started guide at webpack.js.org for a walkthrough of your first configuration.
  4. 4Organise your modules. Write your code as ES modules, CommonJS or AMD modules that import each other.
  5. 5Add loaders for other file types. Configure loaders for CSS, images or TypeScript so webpack can process them during the build.
  6. 6Split code where it helps. Use dynamic import() to load parts of the app on demand and reduce initial page load.
  7. 7Run the build. Run webpack through your project setup and load the generated bundle files in the browser.

Install webpack in your project

Webpack is installed as a development dependency using your package manager. The README gives commands for npm and yarn. You will need Node.js; the README excerpt does not state which version is required, so check the official guides for that detail.

npm install --save-dev webpack

Use yarn instead of npm if you prefer

If your project uses yarn, add webpack the same way as a dev dependency.

yarn add webpack --dev

Understand the core concepts: plugins and loaders

Webpack is built around a plugin interface, and most of its own features use that same interface. Loaders preprocess files while compiling, so you can bundle resources beyond plain JavaScript. Loaders are either invoked with a loadername! prefix in a require() statement or applied automatically by regex in your webpack configuration.

JavaScript, JSON and assets need no loader. CSS and HTML have experimental built-in support, while preprocessors and template engines still need their own loaders.

  • Plugins extend the build, for example to generate HTML pages or prepare compressed assets.
  • Loaders transform files such as TypeScript to JavaScript, Handlebars templates to functions, or images to Base64.
  • Dependencies are resolved during compilation, which keeps the runtime size smaller.

Bundle modules and split code into chunks

Webpack understands ES modules, CommonJS and AMD, including mixtures of them. It can produce a single bundle or several chunks that load asynchronously at runtime, which helps reduce initial load time. Code splitting is useful when parts of your app are only needed on certain pages or after user actions.

  • Use one bundle for small apps.
  • Use chunks for larger apps where some features load on demand.
  • Remember that webpack also needs Promise support for import() and require.ensure().

Check browser support before you start

Webpack supports browsers that are ES5-compliant. IE8 and below are not supported. If you need older browsers, you must load a polyfill before using import() or require.ensure(), as described in the shimming guide.

Know when webpack is not the right tool

Webpack adds configuration overhead. If you only need a simple static page with no build step, a plain HTML file is simpler. Teams that need to support IE8 without adding polyfills should choose a different setup.

What people use it for

  • Bundling a single-page web app into a few files a browser can load
  • Splitting a large app into chunks that load when a user reaches a feature
  • Mixing CommonJS, AMD and ES module code in one project
  • Transpiling TypeScript or compiling Handlebars templates during the build
  • Generating compressed asset versions with a plugin such as compression-webpack-plugin

Frequently asked questions

How do I install webpack?

Install webpack as a dev dependency with npm install --save-dev webpack, or with yarn add webpack --dev. You need Node.js installed, and the official Get Started guide covers the next steps.

Is webpack free to use?

Webpack is released under the MIT licence, which is an open-source licence. The README does not discuss pricing for other products, so check the project's licence file for full terms.

What does webpack require to run?

The README excerpt says you need Node.js but does not state a version. Check the official webpack documentation for current requirements.

Does webpack support IE8?

No. The README says IE8 and below are not supported. Webpack needs ES5-compliant browsers, and you must add polyfills for Promise support if you target older browsers.

What are the alternatives to webpack?

The project's comparison list names Vite, esbuild, Rollup and Parcel as comparable tools. Pick based on your project's needs, such as build speed or configuration effort.

What is the difference between a loader and a plugin?

Loaders preprocess individual files while compiling, such as turning TypeScript into JavaScript. Plugins hook into the wider build process and can do tasks such as generating HTML pages.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Webpack suits frontend developers building single-page or multi-page apps who need code splitting or want to process CSS, images and mixed module formats in one build. Developers with a simple static page, or teams needing IE8 support without polyfills, should choose a lighter tool such as Vite or esbuild.

Install options & downloads