Extends

extends

string | string[]

webpack v5.82.0+ webpack-cli v5.1.0+

The extends property allows you to extend an existing configuration to use as the base. It internally uses the webpack-merge package to merge the configurations and helps you to avoid duplicating configurations between multiple configurations.

base.webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production"),
    }),
  ],
};

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 {
  extends: path.resolve(__dirname, "./base.webpack.config.js"),
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Extending multiple configurations

You can extend multiple configurations at once by passing an array of configuration paths to the extends property.

Configurations from the extends property are merged from right to left, meaning that the configuration on the right will be merged into the configuration on the left. Configuration can be overridden by passing the same property in the configuration on the right.

js.webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

css.webpack.config.js

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

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 {
  extends: [
    path.resolve(__dirname, "./js.webpack.config.js"),
    path.resolve(__dirname, "./css.webpack.config.js"),
  ],
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Overriding Configurations

You can override configurations from the extended configuration by passing the same property in the configuration that extends it.

base.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 {
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

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 {
  extends: path.resolve(__dirname, "./base.webpack.config.js"),
  entry: "./src/index.js",
  // overriding the output path and filename
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].bundle.js",
  },
};

Concatinating rules and plugins

While primitive values (such as strings) are overridden, array fields are concatenated instead of replaced. This behavior comes from webpack-merge, which Webpack uses internally when processing extends.

base.webpack.config.js

import webpack from "webpack";

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: false,
    }),
  ],
};

webpack.config.js

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

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

export default {
  extends: path.resolve(__dirname, "./base.webpack.config.js"),

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  plugins: [new webpack.HotModuleReplacementPlugin()],
};

Result after merging

Instead of module being replaced the rules and plugins array got concatenated

import webpack from "webpack";

export default {
  module: {
    rules: [
      // From base.webpack.config.js
      {
        test: /\.js$/,
        use: "babel-loader",
      },

      // From webpack.config.js (appended)
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  plugins: [
    // From base.webpack.config.js
    new webpack.DefinePlugin({
      __DEV__: false,
    }),

    // From webpack.config.js (appended)
    new webpack.HotModuleReplacementPlugin(),
  ],
};

Loading configuration from external packages

You can also load configuration from third-party packages by passing the package name to the extends property. The package must export the webpack configuration in package.json.

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 {
  extends: require.resolve("webpack-config-foo"),
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Edit this page·Print this page

« Previous

Devtool

Target

Extends

extends

Extending multiple configurations

Overriding Configurations

Concatinating rules and plugins

Loading configuration from external packages

2 Contributors