Registry / web-framework / webpack

webpack

JSON →
library5.106.2jsnpmunverified

Webpack is an advanced open-source module bundler for JavaScript applications, primarily used for client-side deployments, though adaptable for server-side. Its core function is to transform, bundle, and package various web assets—including JavaScript, CSS, images, and fonts—into optimized bundles for browser consumption. Currently stable at version 5.106.2, webpack maintains an active release cadence with frequent patch and minor updates addressing bug fixes, performance improvements, and new features. Key differentiators include its ability to handle multiple module formats (ES Modules, CommonJS, AMD), support for sophisticated code splitting and on-demand loading, a highly extensible loader system for preprocessing different file types, and a powerful plugin architecture that allows for deep customization of the build process, enabling features like asset optimization, environment variable injection, and more. It requires Node.js version 10.13.0 or higher.

web-frameworkdevops
github ↗package ↗homepage ↗
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

The primary webpack function for programmatic API usage is typically imported via CommonJS `require` in `webpack.config.js` files.

const webpack = require('webpack');

This is a TypeScript type definition, used for type-checking your webpack configuration object, not a runtime value to be destructured from `require`.

import { Configuration } from 'webpack';

Many official webpack plugins are exposed as named exports from the main `webpack` package. Older versions sometimes required direct paths to `lib/`.

const { DefinePlugin } = require('webpack');

This quickstart demonstrates a basic `webpack.config.js` for bundling JavaScript, CSS, and image assets, including cleaning the output directory and defining environment variables.

const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', // or 'production' entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, // Clean the output directory before building. }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ], }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), }), ], }; // src/index.js // import './styles.css'; // Example CSS import // import myImage from './my-image.png'; // Example asset import // function component() { // const element = document.createElement('div'); // element.innerHTML = 'Hello webpack!'; // element.classList.add('hello'); // Assuming styles.css has a .hello class // const img = new Image(); // img.src = myImage; // element.appendChild(img); // return element; // } // document.body.appendChild(component()); // console.log('Webpack is bundling!');
webpack --version
Debug
Known footguns
breakingMigrating from webpack 4 to webpack 5 involves significant breaking changes, including the removal of Node.js polyfills, introduction of 'asset modules' replacing file-loader/url-loader, and a new 'experiments' configuration field. Review the official migration guide thoroughly.
breakingThe `output.path` configuration option must always be an absolute path. Using relative paths will result in build errors.
gotchaNot setting the `mode` option in your configuration (e.g., to 'development' or 'production') will cause webpack to default to 'production' mode. This can lead to slower compilation and less helpful error messages during development.
securityA user information bypass vulnerability in the `HttpUriPlugin` was fixed in webpack v5.104.1. Projects utilizing `HttpUriPlugin` on older webpack 5 versions may be affected.
gotchaRunning `webpack` from the command line typically requires `webpack-cli` to be installed. Without it, the `webpack` command may not be found or executed correctly.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
8 hits · last 30 days
gptbot
4
ahrefsbot
3
script
1
Resources
githubhttps://github.com/webpack/webpack ↗
packagehttps://www.npmjs.com/package/webpack ↗
homepagehttps://webpack.js.org ↗