merge plugin for webpack
Webpack plugin with loader for merge sources
This is webpack plugin produces single asset for set of files or multiple assets with grouping technique. The set of files may be splited to groups of set of files that produce group of assets.
- deep webpack integration
- possibility to group files by simple criterion
- autorebuild and reload on source file change (due to deep integration)
- files may be loaded and joined by path pattern or by call function
To build internationalization locale assets consider to use also the intl-webpack-plugin
If need some like this merge plugin but more specifical - fork this plugin and read more about: join-webpack-plugin (from which this merge plugin is derived).
npm install --save-dev merge-webpack-plugin
This is minimal configuration to merge json into single asset:
var MergePlugin = ;moduleexports =module:rules:test: /\.$/iuse:MergePlugin// another formats to merge is possible with loaderstest: /\.$/iuse:MergePlugin'yaml-loader'plugins:search: './src/**/*.json'
var url1 = ;// and/or if preloaders specified, for example 'yaml-loader'var url2 = ;;// or describe files by pattern in plugin param// url1 and url2 will be same name refers to same file// which will also contain content of "third-file.yaml"
Same in modern syntax:
import url1 from "one-of-files.json"import url2 from "another-file.yaml"import "third-file.yaml"// or describe files by pattern in plugin param
This returns public url of file with result of merging. This will be same url for each file merged together according to plugin configuration.
In order to involve files into merge, files must be required by
import or configured by
search param of plugin configuration.
MergePlugin typically created at webpack configuration file and wait hash of configuration options as its create param:
var MergePlugin = ;var merge =search: 'glob' || 'globs'...skip: 'substr' || /regexp/ || 'substr' /regex/ ...group: '[name]'sort: true || false // Default falsename: '[name].[hash].[ext]';
search- glob pattern or pattern array to find and prefetch see glob module for reference
skip- substring or regular expression or array to skip some from searched results
group- default group loader option (see below)
sort- sort output by keys to avoid change
name- default name loader option (see below)
search param works like multi-require with glob patterns.
Only files that required by
require function in code
will be loaded in that case.
Any file that does not match to
skip param and
match to loader section in webpack config and is required in code
import will be loaded and merged anyway.
loader() method includes merge loader into loader chain.
var MergePlugin = ;var theMerge = ...module:rules:test: /\.$/iuse:theMerge// some more pre loadersplugins:theMerge
Preliminary loaders must be applied before merge loader. This means that merge loader must be final loader in loaders chain.
Loader function waits hash of configuration options as its param. Default values of loader may be specified in plugin configuration described above.
group- devides files into separated assets by specifying groping pattern. May include template placeholders described below in groupping section. Grouping is not applied if value is not specified.
name- specifies destination asset file name. String value may include template placeholders described below. Default value is
Configuration values specified directly in
same values specified as default in plugin configuration.
loader() function may be invoked as class function if only one plugin
instance is passed to config. Therefore it is better to use object form
instead of class form:
var theMerge = ...loaders:// this form valid only for single plugin instance:MergePlugin// to avoid problems better to use always object form:theMerge
Files may be grouped by simple criterion. Grouping criterion is
group loader param. If
group param is not
specified than will be only one common group where will be
all files joined togather.
Grouping criteria formed by template placeholders described
interpolateName() from loader-utils module.
Some of that is:
[name]- to group files with same name set group param:
[ext]- to group files with same ext set group param:
[path]- to group files where each group contains files from same directory:
And any derivative combinations.