Registry / web-framework / webpack

webpack

JSON →
library6.0.0jsnpmunverified

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
npm install webpack
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · WEBPACK
W
webpack
web-frameworkjavascriptv6.0.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
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.

webpack
✓ const webpack = require('webpack');
✗ import webpack from 'webpack';
The primary webpack function for programmatic API usage is typically imported via CommonJS `require` in `webpack.config.js` files.
Configuration
✓ import { Configuration } from 'webpack';
✗ const { Configuration } = 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`.
DefinePlugin
✓ const { DefinePlugin } = require('webpack');
✗ import DefinePlugin from 'webpack/lib/DefinePlugin';
Many official webpack plugins are exposed as named exports from the main `webpack` package. Older versions sometimes required direct paths to `lib/`.

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 issues
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.
fix
Consult the official webpack 5 migration guide (webpack.js.org/migrate/5/) to adapt your configuration and codebase.
affects: ^5.0.0
breakingThe `output.path` configuration option must always be an absolute path. Using relative paths will result in build errors.
fix
Ensure `output.path` uses `path.resolve(__dirname, 'your-output-directory')` or similar absolute path logic.
affects: >=5.0.0
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.
fix
Always explicitly set `mode: 'development'` or `mode: 'production'` in your `webpack.config.js`.
affects: >=4.0.0
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.
fix
Upgrade webpack to version 5.104.1 or newer (`npm install webpack@latest` or `yarn upgrade webpack`).
affects: <5.104.1
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.
fix
Install `webpack-cli` as a development dependency: `npm install --save-dev webpack-cli` or `yarn add --dev webpack-cli`.
affects: >=4.0.0
Errors
Common errors & fixes
Error: Configuration object is empty.
Webpack could not find or process a valid `webpack.config.js` file, or the file exports an empty object.
fix
Ensure `webpack.config.js` exists in your project root and exports a non-empty webpack configuration object.
Module not found: Error: Can't resolve 'some-module' in 'path/to/file.js'
Webpack cannot find the specified module. This could be due to a missing loader, incorrect import path, or the module not being installed.
fix
Check the import path for correctness, ensure required loaders are installed and configured (e.g., `css-loader`, `sass-loader`), and verify the module is listed in `package.json` dependencies and installed.
TypeError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
Your `webpack.config.js` contains an invalid property name, an incorrect option value, or a structural error in the configuration object.
fix
Carefully review your `webpack.config.js` against the official webpack documentation for the specific version you are using, paying attention to property names and expected value types.
WebpackDevServer: Content not found. (404)
The webpack-dev-server is unable to locate the bundled assets or the `devServer.static.directory` is incorrectly configured.
fix
Verify that `devServer.static.directory` points to the correct output path (`output.path`) and that the bundled files are being generated successfully.
Upgrade
Version history
6.0.0latest on npm
Audit
Dependencies
webpack-clioptionalProvides command-line interface for running webpack, commonly installed alongside webpack itself.
Agent activity
11 hits · last 30 days
node
10
OpenAI (training)
1
Resources
githubhttps://github.com/webpack/webpack ↗
packagehttps://www.npmjs.com/package/webpack ↗
homepagehttps://webpack.js.org ↗