webpack

https://webpack.js.org/
Admin
webpack is a static module bundler for modern JavaScript applications, which bundles assets and...
Tokens:848,501
Snippets:7,248
Trust Score:8.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Get system info as markdown

Source: https://webpack.js.org/api/cli

Example of getting system info in markdown format.

```bash
npx webpack info --output markdown
```

--------------------------------

### Get system info as JSON with additional package

Source: https://webpack.js.org/api/cli

Example of getting system info in JSON format and including an additional package.

```bash
npx webpack info --output json --additional-package postcss
```

--------------------------------

### DevServer startup message output

Source: https://webpack.js.org/configuration/dev-server

Example output shown when the dev-server starts, indicating the server location and the directory from which content is served.

```text
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory
```

--------------------------------

### Interactive create-webpack-app Setup Output

Source: https://webpack.js.org/blog/2026-04-08-webpack-5-106

Example of the interactive prompts and output when running create-webpack-app. Shows the questions asked and the success message after project initialization.

```text
$ npx create-webpack-app

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm

[create-webpack] ℹ️  Initializing a new Webpack project...
[create-webpack] ✅ Project dependencies installed successfully!
```

--------------------------------

### Version output with webpack-dev-server

Source: https://webpack.js.org/api/cli

Example output when webpack-dev-server is installed, including its version.

```text
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

```

--------------------------------

### Start the Generated Project with npm start

Source: https://webpack.js.org/blog/2026-04-08-webpack-5-106

After scaffolding, navigate into the project directory and run npm start to start the dev server. The generated project includes a working webpack.config.js and dev server configuration.

```bash
cd my-project
npm start
```

--------------------------------

### webpack.config.yaml example

Source: https://webpack.js.org/configuration/configuration-languages

Example YAML configuration file.

```yaml
mode: production
entry: ./src/index.js
output:
  filename: bundle.js

```

--------------------------------

### webpack.config.toml example

Source: https://webpack.js.org/configuration/configuration-languages

Example TOML configuration file.

```toml
mode = "production"
entry = "./src/index.js"

[output]
filename = "bundle.js"

```

--------------------------------

### Basic worker example with index.js, my.worker.js, and webpack.config.js

Source: https://webpack.js.org/loaders/worker-loader

Shows a basic worker setup: index.js creates a worker, handles messages, and posts data; my.worker.js receives messages and posts back; webpack.config.js configures worker-loader with babel-loader for ES6+ support.

```javascript
import Worker from "./my.worker.js";

var worker = new Worker();

var result;

worker.onmessage = function (event) {
  if (!result) {
    result = document.createElement("div");
    result.setAttribute("id", "result");

    document.body.append(result);
  }

  result.innerText = JSON.stringify(event.data);
};

const button = document.getElementById("button");

button.addEventListener("click", function () {
  worker.postMessage({ postMessage: true });
});
```

```javascript
onmessage = function (event) {
  const workerResult = event.data;

  workerResult.onmessage = true;

  postMessage(workerResult);
};
```

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.(c|m)?js$/i,
        use: [
          {
            loader: "worker-loader",
          },
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
    ],
  },
};
```

--------------------------------

### Initialize project and install dependencies

Source: https://webpack.js.org/guides/author-libraries

Initializes the project with npm and installs webpack, webpack-cli, and lodash as development dependencies. lodash is installed as a devDependency because it will be bundled into the library output.

```bash
npm init -y
npm install --save-dev webpack webpack-cli lodash
```

--------------------------------

### Classic setup with mini-css-extract-plugin

Source: https://webpack.js.org/guides/native-css

Shows the legacy webpack configuration using MiniCssExtractPlugin.loader and css-loader for .css files, plus the MiniCssExtractPlugin plugin. This is the starting point for the migration guide.

```javascript
import MiniCssExtractPlugin from "mini-css-extract-plugin";

export default {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};
```

--------------------------------

### Initialize project with force and default template

Source: https://webpack.js.org/api/cli

Example of initializing a project without questions, using the default template.

```bash
npx create-webpack-app ./my-app --force --template=default
```

--------------------------------

### Configuration file for VERSION_A

Source: https://webpack.js.org/plugins/normal-module-replacement-plugin

Example configuration file for version A, used in the advanced example.

```javascript
export default {
  title: "I am version A",
};
```

--------------------------------

### Serve with static and open browser

Source: https://webpack.js.org/api/cli

Example of serving with static files and opening the browser.

```bash
npx webpack serve --static --open
```

--------------------------------

### Install TypeScript definitions for lodash

Source: https://webpack.js.org/guides/typescript

Install @types/lodash to get type definitions for lodash.

```bash
npm install --save-dev @types/lodash
```

--------------------------------

### Install express and webpack-dev-middleware

Source: https://webpack.js.org/guides/development

Installs express and webpack-dev-middleware as devDependencies for a custom dev server setup.

```bash
npm install --save-dev express webpack-dev-middleware
```

--------------------------------

### Webpack CLI example with multiple entries

Source: https://webpack.js.org/api/cli

Example of running webpack with two entry points and a custom output path.

```bash
npx webpack --entry ./first.js --entry ./second.js --output-path /build
```

--------------------------------

### Initialize project and install webpack with npm, yarn, or pnpm

Source: https://webpack.js.org/get-started

Create a directory, initialize a package manager, and install webpack and webpack-cli. Choose one package manager only.

```bash
# Run the commands for one package manager only.

mkdir webpack-demo
cd webpack-demo

# npm
npm init -y
npm install webpack webpack-cli --save-dev

# yarn
yarn init -y
yarn add webpack webpack-cli --dev

# pnpm
pnpm init
pnpm add webpack webpack-cli -D
```

--------------------------------

### Example project structure for output-path

Source: https://webpack.js.org/guides/scaffolding

Shows a sample project structure used in the output-path example.

```text
.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js

```

--------------------------------

### Configuration file for VERSION_B

Source: https://webpack.js.org/plugins/normal-module-replacement-plugin

Example configuration file for version B, used in the advanced example.

```javascript
export default {
  title: "I am version B",
};
```

--------------------------------

### Add start script to package.json for http-server

Source: https://webpack.js.org/guides/progressive-web-application

Adds a start script to package.json that runs http-server on the dist directory. Requires the http-server package installed via npm install http-server --save-dev. Note that webpack DevServer writes in-memory by default, so enable devserverdevmiddleware.writeToDisk for http-server to serve files from ./dist.

```json
{
  ...
  "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "start": "http-server dist"
  },
  ...
}

```

--------------------------------

### Webpack project structure example

Source: https://webpack.js.org/api/cli

Shows a typical project structure before running webpack with an output path.

```text
.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js
```

--------------------------------

### stop: Stop server after delay

Source: https://webpack.js.org/api/webpack-dev-server

Starts the server asynchronously and stops it after 5 seconds using `server.stop()`. The example logs start and stop messages. Run with `node server.js`.

```javascript
import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

const runServer = async () => {
  console.log("Starting server...");
  await server.start();
};

const stopServer = async () => {
  console.log("Stopping server...");
  await server.stop();
};

runServer();

setTimeout(stopServer, 5000);
```

```bash
node server.js
```

--------------------------------

### implementation as string example

Source: https://webpack.js.org/loaders/less-loader

Use a resolved Less module path by passing the implementation option as a string. This example uses require.resolve("less") to get the path.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        type: "css/auto",
        use: [
          {
            loader: "less-loader",
            options: {
              implementation: require.resolve("less"),
            },
          },
        ],
      },
    ],
  },
  experiments: {
    css: true,
  },
};
```

--------------------------------

### Project structure after setup

Source: https://webpack.js.org/get-started

Directory structure after creating index.html and src/index.js.

```text
  webpack-demo
  ├── package.json
  ├── package-lock.json
+ ├── index.html
+ └── src/
+    └── index.js
```

--------------------------------

### An installable PWA (webpack.config.js)

Source: https://webpack.js.org/loaders/html-loader

Configures the generated HTML with a title, viewport meta, favicon, and a web app manifest for installability. Requires experiments.html and a service worker (see PWA guide).

```javascript
export default {
  entry: { main: "./src/main.js" },
  output: {
    html: {
      title: "My App",
      meta: { viewport: "width=device-width, initial-scale=1" },
      favicon: "./src/icon.svg",
      manifest: {
        name: "My App",
        short_name: "App",
        start_url: "/",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          { src: "./src/icon-192.png", sizes: "192x192" },
          { src: "./src/icon-512.png", sizes: "512x512" },
        ],
      },
    },
  },
  experiments: { html: true },
};

```

--------------------------------

### Version output without webpack-dev-server

Source: https://webpack.js.org/contribute/writing-a-scaffold

Example output of the `npx webpack version` command when webpack-dev-server is not installed.

```text
webpack 5.31.2
webpack-cli 4.6.0
```

--------------------------------

### Diff block example

Source: https://webpack.js.org/get-started

Shows how diff blocks are used in the guide to indicate lines to add (+) or remove (-).

```diff
+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.
```

--------------------------------

### Build with custom config and verbose stats

Source: https://webpack.js.org/api/cli

Example of building with a custom config file and verbose stats output.

```bash
npx webpack build --config ./webpack.config.js --stats verbose
```

--------------------------------

### An installable PWA (webpack.config.js)

Source: https://webpack.js.org/guides/native-html

Configures output.html.manifest to generate a web app manifest with name, icons, and display settings, making the page installable as a PWA. Requires the service worker half from the referenced PWA guide.

```javascript
export default {
  entry: { main: "./src/main.js" },
  output: {
    html: {
      title: "My App",
      meta: { viewport: "width=device-width, initial-scale=1" },
      favicon: "./src/icon.svg",
      manifest: {
        name: "My App",
        short_name: "App",
        start_url: "/",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          { src: "./src/icon-192.png", sizes: "192x192" },
          { src: "./src/icon-512.png", sizes: "512x512" },
        ],
      },
    },
  },
  experiments: { html: true },
};
```

--------------------------------

### Get module URL with import.meta.url

Source: https://webpack.js.org/api/module-variables

Returns the absolute file: URL of the module. Example output is shown in the comment.

```javascript
console.log(import.meta.url); // output something like `file:///path/to/your/project/src/index.js`
```

--------------------------------

### Enable bonjour

Source: https://webpack.js.org/configuration/dev-server

Broadcasts the dev server via ZeroConf networking on start.

```javascript
export default {
  // ...
  devServer: {
    bonjour: true,
  },
};
```

--------------------------------

### Asynchronous Loaders

Source: https://webpack.js.org/api/loaders

Examples of asynchronous loaders that return a Promise from an async function or use `this.async` to get a callback for asynchronous operations.

```APIDOC
## Asynchronous Loaders

### Description
Asynchronous loaders can return a Promise from an async function or use `this.async()` to retrieve a callback for asynchronous operations.

### Example: async-loader.js
```js
export default async function asyncLoader(content, map, meta) {
  const result = await someAsyncOperation(content);
  return result;
}
```

### Example: async-loader-with-callback.js
```js
export default function asyncLoaderWithCallback(content, map, meta) {
  const callback = this.async();
  someAsyncOperation(content, (err, result) => {
    if (err) return callback(err);
    callback(null, result, map, meta);
  });
}
```

### Example: async-loader-with-multiple-results.js
```js
export default function asyncLoaderWithMultipleResults(content, map, meta) {
  const callback = this.async();
  someAsyncOperation(content, (err, result, sourceMaps, meta) => {
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
}
```
```

--------------------------------

### Project structure for entry points example

Source: https://webpack.js.org/guides/code-splitting-async

Shows the file tree of the webpack-demo project with the addition of another-module.js in the src directory.

```text
 webpack-demo
  ├── package.json
  ├── package-lock.json
  ├── webpack.config.js
  ├── /dist
  ├── /src
  │   ├── index.js
+ │   └── another-module.js
  └── /node_modules

```

--------------------------------

### implementation as string

Source: https://webpack.js.org/loaders/stylus-loader

Specifies the Stylus implementation as a string by using require.resolve to get the module path. Overrides the locally installed peerDependency version.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/i,
        type: "css/auto",
        use: [
          {
            loader: "stylus-loader",
            options: {
              implementation: require.resolve("stylus"),
            },
          },
        ],
      },
    ],
  },
  experiments: {
    css: true,
  },
};
```

--------------------------------

### CoffeeScript with Babel transpilation setup

Source: https://webpack.js.org/loaders/coffee-loader

Setup for using CoffeeScript with Babel: install @babel/core and @babel/preset-env, create a .babelrc file, and configure coffee-loader with the transpile option. This is needed because CoffeeScript 2 generates modern JavaScript that may require transpilation for older environments.

```bash
npm install --save-dev @babel/core @babel/preset-env
echo '{ "presets": ["@babel/env"] }' > .babelrc
```

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          transpile: {
            presets: ["@babel/env"],
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Install and run mocha-webpack

Source: https://webpack.js.org/guides/integrations

Installs webpack, mocha, and mocha-webpack, then runs the test suite in ./test using mocha-webpack.

```bash
npm install --save-dev webpack mocha mocha-webpack
mocha-webpack 'test/**/*.js'
```

--------------------------------

### Example .txt file content

Source: https://webpack.js.org/guides/asset-modules

Example text file used with the asset/bytes configuration.

```text
Hello world
```

--------------------------------

### PrefetchPlugin in webpack config

Source: https://webpack.js.org/plugins/prefetch-plugin

Example webpack configuration that uses PrefetchPlugin to start building the heaviest dependency early. The plugin is added to the plugins array with a context path and a request string.

```javascript
import path from "node:path";
import webpack from "webpack";

export default {
  plugins: [
    // start building the heaviest dependency right away
    new webpack.PrefetchPlugin(path.resolve("./src"), "./deeply/nested/heavy"),
  ],
};
```

--------------------------------

### Basic Example: virtual module with build info

Source: https://webpack.js.org/plugins/virtual-url-plugin

Creates a virtual module 'buildInfo' that generates a build timestamp. The source function is called to generate the module content. The module is imported using the 'virtual:' scheme.

```javascript
import webpack from "webpack";

new webpack.experiments.schemes.VirtualUrlPlugin({
  buildInfo: {
    source() {
      return `export const buildTime = ${Date.now()}`;
    },
    version: true,
  },
});
```

```javascript
import { buildTime } from "virtual:buildInfo";

console.log(`App version: ${buildTime}`);
```

--------------------------------

### Scaffold a New Project with npx create-webpack-app

Source: https://webpack.js.org/blog/2026-04-08-webpack-5-106

Run npx create-webpack-app to start an interactive setup for a new webpack project. This is the recommended way to scaffold, replacing the old webpack init command.

```bash
npx create-webpack-app
```

--------------------------------

### Add webpack build script

Source: https://webpack.js.org/get-started/install-webpack

Example npm script that runs webpack via the local installation in node_modules. Use node_modules/.bin/webpack or npx webpack (npm v5.2.0+) to run the local binary directly.

```json
"scripts": {
  "build": "webpack --config webpack.config.js"
}
```

--------------------------------

### Version output example

Source: https://webpack.js.org/api/cli

Example output of the version command showing webpack and webpack-cli versions.

```text
webpack 5.31.2
webpack-cli 4.6.0

```

--------------------------------

### Basic example: replace config for production

Source: https://webpack.js.org/plugins/normal-module-replacement-plugin

Replaces a development config module with a production one when building for production. The resourceRegExp matches the development config path.

```javascript
new webpack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  "./config.production.js",
);
```

--------------------------------

### Basic coffee-loader setup with file.coffee and webpack.config.js

Source: https://webpack.js.org/loaders/coffee-loader

Example CoffeeScript file and the corresponding webpack configuration to compile .coffee files with coffee-loader. The file.coffee demonstrates various CoffeeScript features, and webpack.config.js sets up the loader rule.

```coffeescript
# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)
```

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
      },
    ],
  },
};
```

--------------------------------

### Configure generate with full options (asset type)

Source: https://webpack.js.org/plugins/compression-webpack-plugin

Full configuration example for a generator of type `"asset"` using `sharpGenerate`. Shows all available options: `implementation`, `options`, `type`, `filename`, `filter`, `deleteOriginalAssets`, `threshold`, `minRatio`, and `relatedName`.

```javascript
new MinimizerPlugin({
  test: /\.(jpe?g|png)$/i,
  generate: {
    webp: {
      implementation: MinimizerPlugin.sharpGenerate,
      options: { encodeOptions: { webp: {} } },
      type: "asset",
      // Optional, a template or a function answering with one. Without it the
      // generator's own name for the result is used, which for `sharpGenerate`
      // is the original with its extension replaced.
      filename: "[path][name].webp",
      // Optional. Narrows what this generator reads, on top of `test`.
      filter: (name) => !name.includes("icons/"),
      // Optional, `false` by default: the asset it read stays where it is.
      // Written as a function it is asked per asset.
      deleteOriginalAssets: false,
      // Optional. Skips an asset this small, before the generator is asked.
      threshold: 10240,
      // Optional. Drops the result unless it is this much smaller than what
      // it read, as `generated size / original size`.
      minRatio: 0.8,
      // Optional. The key the new file is recorded under in the original's
      // `related` info, which is how a server asked for one finds the other.
      relatedName: "webp",
    },
  },
});
```

--------------------------------

### Basic webpack configuration with postcss-loader

Source: https://webpack.js.org/loaders/postcss-loader

Basic setup: import CSS from a JS file and configure webpack with built-in CSS support (webpack >= 5.87.0) and postcss-loader using the postcss-preset-env plugin. The plugin is not installed by default. If using css-loader and style-loader, place postcss-loader before them.

```javascript
import css from "file.css";

```

```javascript
module.exports = {
  experiments: {
    // Enable the built-in CSS support of webpack
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        // `css/auto` treats `*.module.css` files as CSS modules and all other files as regular CSS
        type: "css/auto",
        use: [
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

```

--------------------------------

### Use this.rootContext to make a relative path

Source: https://webpack.js.org/api/loaders

Example loader using this.rootContext to compute a path relative to the project root. this.rootContext is the absolute path of the project's base directory (the context option, defaulting to the directory webpack was started from) and is stable across modules, unlike this.context. Since webpack 4, this replaces the former this.options.context.

```javascript
import path from "node:path";

export default function loader(source) {
  const relative = path.relative(this.rootContext, this.resourcePath);
  // …
}
```

--------------------------------

### create-webpack-app init interactive output

Source: https://webpack.js.org/configuration

Example output from running npx create-webpack-app init, showing the interactive prompts and the successful initialization messages. The tool asks about JS solution, dev server, HTML generation, PWA support, CSS solution, PostCSS, CSS extraction, and package manager.

```bash
$ npx create-webpack-app init

Need to install the following packages:
create-webpack-app@2.0.0
Ok to proceed? (y)

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new Webpack project
...
...
...
[create-webpack] ✅ Project dependencies installed successfully!
[create-webpack] ✅ Project has been initialised with webpack!
```

--------------------------------

### Example .txt file for loader test

Source: https://webpack.js.org/contribute/writing-a-loader

Example input file for the loader test.

```text
Hey [name]!
```

--------------------------------

### webpack.config.js: Use functions for favicon, manifest, and integrity

Source: https://webpack.js.org/guides/native-html

Example showing how to use functions for favicon, manifest, and integrity options to vary them per page or per asset in a multi-page build. The favicon function returns a path based on the asset name, manifest returns a path only for the 'app' page, and integrity skips SRI for chunks starting with 'vendor/'.

```javascript
export default {
  experiments: { html: true },
  output: {
    html: {
      favicon: (name) => `./src/icons/${name}.svg`,
      manifest: (name) => (name === "app" ? "./src/app.webmanifest" : false),
      // Skip SRI for the chunks a CDN rewrites.
      integrity: ({ filename }) =>
        filename.startsWith("vendor/") ? false : ["sha384"],
    },
  },
};
```
Tokens:
Raw