Configuration

You may have noticed that few webpack configurations look exactly alike. This is because webpack's configuration file is a JavaScript file that exports a webpack configuration. This configuration is then processed by webpack based upon its defined properties.

Because it's a standard Node.js module, you can do the following:

• Import other files via require(...) or import
• Use utilities on npm via require(...) or import
• Use JavaScript control flow expressions (e.g. ?:, if, for, etc.)
• Use constants or variables for often used values
• Write and execute functions to generate a part of the configuration

Use these features when appropriate.

While they are technically feasible, the following practices should be avoided:

• Access CLI arguments, when using the webpack CLI. This can make your configuration non-portable and harder to maintain. Instead, write your own CLI, or use --env to pass environment variables.
• Export non-deterministic values (calling webpack twice should result in the same output files)
• Write long configurations (instead split the configuration into multiple files)

The examples below describe how webpack's configuration can be both expressive and configurable because it is code:

Introductory Configuration

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  mode: "development",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

See: Configuration section for all supported configuration options

Using multiple configurations

Webpack supports exporting multiple configuration objects, which can be useful when building different targets or outputs (for example, separate client and server bundles).

While a single configuration is sufficient for many projects, multiple configurations can help organize more complex setups.

module.exports = [
  {
    entry: "./src/client.js",
    output: {
      filename: "client.bundle.js",
    },
  },
  {
    entry: "./src/server.js",
    output: {
      filename: "server.bundle.js",
    },
  },
];

Multiple Targets

Along with exporting a single configuration as an object, function or Promise, you can export multiple configurations.

See: Exporting multiple configurations

Using other Configuration Languages

Webpack accepts configuration files written in multiple programming and data languages.

See: Configuration Languages