Ambiguity in Overriding Configurations

[cseas]

trafficstars

Feature to document

Merging arrays and objects within two webpack configs.

Congrats to the team on shipping the extends flag! :tada:

I went through the docs and it's not clear whether the extends option can be used to merge arrays and objects from two configs like we can do with the webpack-merge package.

For example, is the below config going to override the module property of the base config completely?

module.exports = {
  extends: path.resolve(__dirname, './base.webpack.config.js'),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

It's a common use-case to preserve the rules and plugins of the base config and only add to the existing rules/plugins. Example, adding one rule to Storybook's webpack config.

If this is not supported by the extends property, can webpack-merge or object spreading be listed as an alternative in the documentation?

Use-case:

Merging two webpack configs and concatenating the objects and arrays inside them instead of overriding the base config's properties completely.

Author(s)

@burhanuday

Additional information

[ ] I am willing to work on this issue and submit a pull request.

[snitin315]

webpack-cli uses webpack-merge under the hood to extend the configuration. So the behaviour should be same as webpack-merge.

[cseas]

webpack-cli uses webpack-merge under the hood to extend the configuration. So the behaviour should be same as webpack-merge.

That's not clear from the docs. The Overriding Configurations section mentions that passing the same property in the extended configuration will override the original one instead of merging the value if its an array/object.

Can an example be added to explain the example of merging, using rules or plugins property?

[snitin315]

Can an example be added to explain the example of merging, using rules or plugins property?

@cseas Yes, we would gladly accept a PR for this.

[burhanuday]

It's there in the description of the extends option But yes, to those who dont know what webpack-merge is, this would be definitely helpful