From cf5c3c0c481161e1d9bf8df79a7e2166a306ed3a Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Mon, 1 May 2023 10:53:10 +0530 Subject: [PATCH 1/9] docs: update docs for the extends option --- src/content/api/cli.mdx | 10 ++ .../extending-configurations.mdx | 117 ++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 src/content/configuration/extending-configurations.mdx diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx index aee17191d670..a2eb407a5004 100644 --- a/src/content/api/cli.mdx +++ b/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** diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx new file mode 100644 index 000000000000..11bc614be550 --- /dev/null +++ b/src/content/configuration/extending-configurations.mdx @@ -0,0 +1,117 @@ +--- +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. + +**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: 'webpack-config-foo', + entry: './src/index.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'bundle.js', + }, +}; +``` From 6cca80aafb640b0e27f26c2daeb12b4267ff5c12 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Wed, 3 May 2023 09:05:38 +0530 Subject: [PATCH 2/9] docs: remove section on external packages --- .../configuration/extending-configurations.mdx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 11bc614be550..01d8eccabddb 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -98,20 +98,3 @@ module.exports = { }, }; ``` - -## 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: 'webpack-config-foo', - entry: './src/index.js', - output: { - path: path.resolve(__dirname, 'dist'), - filename: 'bundle.js', - }, -}; -``` From 646131c76de566f3e622fa6521d1fc03a01dbce6 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Wed, 3 May 2023 09:45:57 +0530 Subject: [PATCH 3/9] docs: add fixed docs for external packages --- .../configuration/extending-configurations.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 01d8eccabddb..1e950884f536 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -98,3 +98,20 @@ module.exports = { }, }; ``` + +## 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', + }, +}; +``` From 33750b3d50037c3931ebcbf35d3f768c05b98f1e Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Wed, 3 May 2023 09:49:20 +0530 Subject: [PATCH 4/9] docs: add warning for node api --- src/content/configuration/extending-configurations.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 1e950884f536..44310672399f 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -11,6 +11,8 @@ contributors: 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 From ddcf06fdd92bb7c9615099b020d08f90ab6e31bf Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Thu, 4 May 2023 10:02:45 +0530 Subject: [PATCH 5/9] docs: add version after which extends property is supported --- src/content/configuration/extending-configurations.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 44310672399f..76ee73534dfb 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -9,6 +9,9 @@ contributors: `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. From 0061706c5e8c974bcb70f877993f91cd3bfd77b8 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Sun, 7 May 2023 09:15:26 +0530 Subject: [PATCH 6/9] Apply suggestions from code review Co-authored-by: Nitin Kumar --- .../configuration/extending-configurations.mdx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 76ee73534dfb..8dc85d563c67 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -9,10 +9,9 @@ contributors: `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. +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. @@ -45,7 +44,7 @@ module.exports = { ```javascript module.exports = { - extends: './base.webpack.config.js', + extends: path.resolve(__dirname, './base.webpack.config.js'), entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), @@ -58,7 +57,7 @@ module.exports = { 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. +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** @@ -95,7 +94,7 @@ module.exports = { ```javascript module.exports = { - extends: ['./js.webpack.config.js', './css.webpack.config.js'], + 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'), @@ -106,7 +105,7 @@ module.exports = { ## 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. +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** From 66a9d8bb7469b06a8a99f12269e2fb68f5ba22e5 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Sun, 7 May 2023 09:22:17 +0530 Subject: [PATCH 7/9] docs: added docs on extending a configuration --- .../extending-configurations.mdx | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 8dc85d563c67..0b0d70c2444b 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -94,7 +94,10 @@ module.exports = { ```javascript module.exports = { - extends: [path.resolve(__dirname, './js.webpack.config.js'), path.resolve(__dirname, './css.webpack.config.js')], + 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'), @@ -103,6 +106,35 @@ module.exports = { }; ``` +## 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. From 39b1458acca39874d575637c0df35986812829e4 Mon Sep 17 00:00:00 2001 From: Burhanuddin Udaipurwala Date: Sun, 7 May 2023 09:28:57 +0530 Subject: [PATCH 8/9] docs: fix CLI version --- src/content/configuration/extending-configurations.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 0b0d70c2444b..d00a2fd328eb 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -9,7 +9,7 @@ contributors: `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. From 41cc0ee47ce96b7c9a39b74ff398bc542b9fd57d Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Mon, 8 May 2023 06:40:06 +0530 Subject: [PATCH 9/9] Update src/content/api/cli.mdx --- src/content/api/cli.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx index a2eb407a5004..c5aaeef397d0 100644 --- a/src/content/api/cli.mdx +++ b/src/content/api/cli.mdx @@ -544,6 +544,8 @@ npx webpack --config ./first.js --config ./second.js --merge ### extends + + You can extend existing webpack configurations with the help of `--extends`: ```bash