docs: update docs for the extends option

src/content/api/cli.mdx

@@ -18,6 +18,7 @@ contributors:
   - smelukov
   - anikethsaha
   - jamesgeorge007
+  - burhanuday
 related:
   - title: Analyzing Build Statistics
     url: https://survivejs.com/webpack/optimizing-build/analyzing-build-statistics/
@@ -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
 
@@ -540,6 +542,14 @@ You can merge two or more different webpack configurations with the help of `--m
 npx webpack --config ./first.js --config ./second.js --merge
 ```
 
+### extends
+
+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**

src/content/configuration/extending-configurations.mdx

@@ -0,0 +1,119 @@
+---
+title: Extends
+sort: 12
+contributors:
+  - burhanuday
+---
+
+## extends
+
+`string | string[]`
+
+The `extends` property allows you to extend an existing configuration to use as base. It internally uses the `webpack-merge` package to merge the configurations and helps you to avoid duplicating configuration 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: './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 overriden 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: ['./js.webpack.config.js', './css.webpack.config.js'],
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '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',
+  },
+};
+```