Skip to content

Commit

Permalink
docs(configuration): update docs for the extends option (#6794)
Browse files Browse the repository at this point in the history
Co-authored-by: Nitin Kumar <snitin315@gmail.com>
  • Loading branch information
burhanuday and snitin315 authored May 8, 2023
1 parent 0be627d commit e5a74ae
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 0 deletions.
12 changes: 12 additions & 0 deletions src/content/api/cli.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ contributors:
- smelukov
- anikethsaha
- jamesgeorge007
- burhanuday
related:
- title: Analyzing Build Statistics
url: https://survivejs.com/webpack/optimizing-build/analyzing-build-statistics/
Expand Down Expand Up @@ -270,6 +271,7 @@ By default webpack ships with the following flags:
| `--disable-interpret` | boolean | Disable interpret for loading the config file. |
| `--fail-on-warnings` | boolean | Stop webpack-cli process with non-zero exit code on warnings from webpack |
| [`--analyze`](#analyzing-bundle) | boolean | It invokes `webpack-bundle-analyzer` plugin to get bundle information |
| [`--extends, -e`](#extends) | string[] | Extend an existing configuration |

### Negated Flags

Expand Down Expand Up @@ -540,6 +542,16 @@ You can merge two or more different webpack configurations with the help of `--m
npx webpack --config ./first.js --config ./second.js --merge
```

### extends

<Badge text="webpack-cli v5.1.0+" />

You can extend existing webpack configurations with the help of `--extends`:

```bash
npx webpack --extends ./base.webpack.config.js
```

### json

**Print result of webpack as JSON**
Expand Down
153 changes: 153 additions & 0 deletions src/content/configuration/extending-configurations.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
---
title: Extends
sort: 12
contributors:
- burhanuday
---

## extends

`string | string[]`

<Badge text="webpack v5.82.0+" /> <Badge text="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.

W> **This option is not supported via the Node API**: Extends will have no effect when using the Node API. webpack-cli is required to use this feature.

**base.webpack.config.js**

```javascript
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**

```javascript
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**

```javascript
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
```

**css.webpack.config.js**

```javascript
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
```

**webpack.config.js**

```javascript
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',
},
};
```

## Overridding Configurations

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

**base.webpack.config.js**

```javascript
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
```

**webpack.config.js**

```javascript
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',
},
};
```

## 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**

```javascript
module.exports = {
extends: require.resolve('webpack-config-foo'),
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
```

0 comments on commit e5a74ae

Please sign in to comment.