Extends
extends
string | string[]
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
module.exports = {
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
module.exports = {
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
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
};css.webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};webpack.config.js
module.exports = {
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
module.exports = {
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};webpack.config.js
module.exports = {
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
const webpack = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
},
],
},
plugins: [
new webpack.DefinePlugin({
__DEV__: false,
}),
],
};webpack.config.js
const path = require("node:path");
const webpack = require("webpack");
module.exports = {
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
const webpack = require("webpack");
module.exports = {
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
module.exports = {
extends: require.resolve("webpack-config-foo"),
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};2 Contributors
