diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
commit | de98e0b232509d5f40c135d540a70e415272ff85 (patch) | |
tree | a79222a5b58484ab3b80d18efcaaa7ccc4769b33 /node_modules/webpack-merge/README.md | |
parent | e0c9d480a73fa629c1e4a47d3e721f1d2d345406 (diff) | |
download | wallet-core-de98e0b232509d5f40c135d540a70e415272ff85.tar.xz |
node_modules
Diffstat (limited to 'node_modules/webpack-merge/README.md')
-rw-r--r-- | node_modules/webpack-merge/README.md | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/node_modules/webpack-merge/README.md b/node_modules/webpack-merge/README.md new file mode 100644 index 000000000..4aaa7da1f --- /dev/null +++ b/node_modules/webpack-merge/README.md @@ -0,0 +1,363 @@ +[![build status](https://secure.travis-ci.org/survivejs/webpack-merge.svg)](http://travis-ci.org/survivejs/webpack-merge) [![bitHound Score](https://www.bithound.io/github/survivejs/webpack-merge/badges/score.svg)](https://www.bithound.io/github/survivejs/webpack-merge) [![codecov](https://codecov.io/gh/survivejs/webpack-merge/branch/master/graph/badge.svg)](https://codecov.io/gh/survivejs/webpack-merge) + +# 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. + +There's also a webpack specific merge variant known as `merge.smart` that's able to take webpack specifics into account (i.e., it can flatten loader definitions). + +## 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. + +```javascript +// Default API +var output = merge(object1, object2, object3, ...); + +// You can pass an array of objects directly. +// This works with all available functions. +var output = merge([object1, object2, object3]); +``` + +### **`merge({ customizeArray, customizeObject })(...configuration | [...configuration])`** + +`merge` behavior can be customized per field through a curried customization API. + +```javascript +// Customizing array/object behavior +var output = merge( + { + customizeArray(a, b, key) { + if (key === 'extensions') { + return _.uniq([...a, ...b]); + } + + // Fall back to default merging + return undefined; + }, + customizeObject(a, b, key) { + if (key === 'module') { + // Custom merging + return _.merge({}, a, b); + } + + // Fall back to default merging + return undefined; + } + } +)(object1, object2, object3, ...); +``` + +### **`merge.unique(<field>, <fields>, field => field)`** + +```javascript +const output = merge({ + customizeArray: merge.unique( + 'plugins', + ['HotModuleReplacementPlugin'], + plugin => plugin.constructor && plugin.constructor.name + ) +})({ + plugins: [ + new webpack.HotModuleReplacementPlugin() + ] +}, { + plugins: [ + new webpack.HotModuleReplacementPlugin() + ] +}); + +// Output contains only single HotModuleReplacementPlugin now. +``` + +## Merging with Strategies + +### **`merge.strategy({ <field>: '<prepend|append|replace>''})(...configuration | [...configuration])`** + +Given you may want to configure merging behavior per field, there's a strategy variant: + +```javascript +// Merging with a specific merge strategy +var output = merge.strategy( + { + entry: 'prepend', // or 'replace', defaults to 'append' + 'module.loaders': 'prepend' + } +)(object1, object2, object3, ...); +``` + +### **`merge.smartStrategy({ <key>: '<prepend|append|replace>''})(...configuration | [...configuration])`** + +The same idea works with smart merging too (described below in greater detail). + +```javascript +var output = merge.smartStrategy( + { + entry: 'prepend', // or 'replace' + 'module.loaders': 'prepend' + } +)(object1, object2, object3, ...); +``` + +## Smart Merging + +### **`merge.smart(...configuration | [...configuration])`** + +*webpack-merge* tries to be smart about merging loaders when `merge.smart` is used. Loaders with matching tests will be merged into a single loader value. + +Note that the logic picks up webpack 2 `rules` kind of syntax as well. The examples below have been written in webpack 1 syntax. + +**package.json** + +```json5 +{ + "scripts": { + "start": "webpack-dev-server", + "build": "webpack" + }, + // ... +} +``` + +**webpack.config.js** + +```javascript +var path = require('path'); +var merge = require('webpack-merge'); + +var TARGET = process.env.npm_lifecycle_event; + +var common = { + entry: path.join(__dirname, 'app'), + ... + module: { + loaders: [ + { + test: /\.css$/, + loaders: ['style', 'css'], + }, + ], + }, +}; + +if(TARGET === 'start') { + module.exports = merge(common, { + module: { + // loaders will get concatenated! + loaders: [ + { + test: /\.jsx?$/, + loader: 'babel?stage=1', + include: path.join(ROOT_PATH, 'app'), + }, + ], + }, + ... + }); +} + +if(TARGET === 'build') { + module.exports = merge(common, { + ... + }); +} + +... +``` + +**Loader string values `loader: 'babel'` override each other.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loader: 'babel' + }] +}, { + loaders: [{ + test: /\.js$/, + loader: 'coffee' + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + loader: 'coffee' + }] +} +``` + +**Loader array values `loaders: ['babel']` will be merged, without duplication.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loaders: ['babel'] + }] +}, { + loaders: [{ + test: /\.js$/, + loaders: ['coffee'] + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + // appended because Webpack evaluated these from right to left + // this way you can specialize behavior and build the loader chain + loaders: ['babel', 'coffee'] + }] +} +``` + +**Loader array values `loaders: ['babel']` can be reordered by including +original loaders.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loaders: ['babel'] + }] +}, { + loaders: [{ + test: /\.js$/, + loaders: ['react-hot', 'babel'] + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + // order of second argument is respected + loaders: ['react-hot', 'babel'] + }] +} +``` + +**Loader query strings `loaders: ['babel?plugins[]=object-assign']` will be overridden.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loaders: ['babel?plugins[]=object-assign'] + }] +}, { + loaders: [{ + test: /\.js$/, + loaders: ['babel', 'coffee'] + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + loaders: ['babel', 'coffee'] + }] +} +``` + +**Loader arrays in source values will have loader strings merged into them.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loader: 'babel' + }] +}, { + loaders: [{ + test: /\.js$/, + loaders: ['coffee'] + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + // appended because Webpack evaluated these from right to left! + loaders: ['babel', 'coffee'] + }] +} +``` + +**Loader strings in source values will always override.** + +```javascript +merge.smart({ + loaders: [{ + test: /\.js$/, + loaders: ['babel'] + }] +}, { + loaders: [{ + test: /\.js$/, + loader: 'coffee' + }] +}); +// will become +{ + loaders: [{ + test: /\.js$/, + loader: 'coffee' + }] +} +``` + +## Multiple Merging + +### **`merge.multiple(...configuration | [...configuration])`** + +Sometimes you may need to support multiple targets, *webpack-merge* will accept an object where each key represents the target configuration. The output becomes an *array* of configurations where matching keys are merged and non-matching keys are added. + +```javascript +var path = require('path'); +var baseConfig = { + server: { + target: 'node', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'lib.node.js' + } + }, + client: { + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'lib.js' + } + } + }; + +// specialized configuration +var production = { + client: { + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].[hash].js' + } + } + } + +module.exports = merge.multiple(baseConfig, production) +``` + +> Check out [SurviveJS - Webpack and React](http://survivejs.com/) to dig deeper into the topic. + +## Development + +1. `npm i` +2. `npm run watch` + +Before contributing, please open an issue where to discuss. + +## License + +*webpack-merge* is available under MIT. See LICENSE for more details. |