webpack-merge - Merge designed for Webpack
webpack-merge provides a merge
function that concatenates arrays and merges objects creating a new object. If functions are encountered, it will execute them, run the results through the algorithm, and then wrap the returned values within a function again.
This behavior is particularly useful in configuring webpack although it has uses beyond it. Whenever you need to merge configuration objects, webpack-merge can come in handy.
Standard Merging
merge(...configuration | [...configuration])
merge
is the core, and the most important idea, of the API. Often this is all you need unless you want further customization.
import { merge } from 'webpack-merge';
const output = merge(object1, object2, object3, ...);
const output = merge([object1, object2, object3]);
const output = merge(
{ fruit: "apple", color: "red" },
{ fruit: "strawberries" }
);
console.log(output);
Note that Promise
s are not supported! If you want to return a configuration wrapped within a Promise
, merge
inside one. Example: Promise.resolve(merge({ ... }, { ... }))
.
mergeWithCustomize({ customizeArray, customizeObject })(...configuration | [...configuration])
merge
behavior can be customized per field as below:
import { mergeWithCustomize } from 'webpack-merge';
const output = mergeWithCustomize(
{
customizeArray(a, b, key) {
if (key === 'extensions') {
return _.uniq([...a, ...b]);
}
return undefined;
},
customizeObject(a, b, key) {
if (key === 'module') {
return _.merge({}, a, b);
}
return undefined;
}
}
)(object1, object2, object3, ...);
For example, if the previous code was invoked with only object1
and object2
with object1
as:
{
foo1: ['object1'],
foo2: ['object1'],
bar1: { object1: {} },
bar2: { object1: {} },
}
and object2
as:
{
foo1: ['object2'],
foo2: ['object2'],
bar1: { object2: {} },
bar2: { object2: {} },
}
then customizeArray
will be invoked for each property of Array
type, i.e:
customizeArray(["object1"], ["object2"], "foo1");
customizeArray(["object1"], ["object2"], "foo2");
and customizeObject
will be invoked for each property of Object
type, i.e:
customizeObject({ object1: {} }, { object2: {} }, bar1);
customizeObject({ object1: {} }, { object2: {} }, bar2);
unique(<field>, <fields>, field => field)
The first <field>
is the config property to look through for duplicates.
<fields>
represents the values that should be unique when you run the field => field function on each duplicate.
import { mergeWithCustomize, unique } from "webpack-merge";
const output = mergeWithCustomize({
customizeArray: unique(
"plugins",
["HotModuleReplacementPlugin"],
(plugin) => plugin.constructor && plugin.constructor.name
),
})(
{
plugins: [new webpack.HotModuleReplacementPlugin()],
},
{
plugins: [new webpack.HotModuleReplacementPlugin()],
}
);
customizeArray
and customizeObject
customizeArray
and customizeObject
provide small strategies to for mergeWithCustomize
. They support append
, prepend
, replace
, and wildcards for field names.
import { mergeWithCustomize, customizeArray, customizeObject } from 'webpack-merge';
const output = mergeWithCustomize({
customizeArray: customizeArray({
'entry.*': 'prepend'
}),
customizeObject: customizeObject({
entry: 'prepend'
})
})(object1, object2, object3, ...);
Check out SurviveJS - Webpack to dig deeper into the topic.
Development
npm i
npm t -- --watch
Before contributing, please open an issue where to discuss.
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
webpack-merge is available under MIT. See LICENSE for more details.