{"id":15736835,"url":"https://github.com/oklas/join-webpack-plugin","last_synced_at":"2025-03-31T04:41:41.777Z","repository":{"id":57281473,"uuid":"80022389","full_name":"oklas/join-webpack-plugin","owner":"oklas","description":"Webpack plugin with loader that join sources by predefined method","archived":false,"fork":false,"pushed_at":"2017-03-28T20:41:48.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-08T21:06:08.909Z","etag":null,"topics":["emit","join","json","loader","merge","module","plugin","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oklas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-25T14:33:46.000Z","updated_at":"2022-11-07T21:51:41.000Z","dependencies_parsed_at":"2022-09-19T20:46:00.088Z","dependency_job_id":null,"html_url":"https://github.com/oklas/join-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fjoin-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fjoin-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fjoin-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oklas%2Fjoin-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oklas","download_url":"https://codeload.github.com/oklas/join-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418699,"owners_count":20773935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emit","join","json","loader","merge","module","plugin","webpack"],"created_at":"2024-10-04T01:41:36.099Z","updated_at":"2025-03-31T04:41:41.758Z","avatar_url":"https://github.com/oklas.png","language":"JavaScript","readme":"[![npm][npm-image]][npm-url]\n[![travis-cl][travis-image]][travis-url]\n[![coverage][cover-image]][cover-url]\n\n# join plugin for webpack\n\n\n- [Install](#install)\n- [Webpack configuration](#webpack-configuration)\n- [Requiring](#requiring)\n- [Plugin configuration](#plugin-configuration)\n- [Define joining](#define-joining)\n- [Loader configuration](#loader-configuration)\n- [Grouping](#grouping)\n\n\n**Webpack plugin with loader that join sources by predefined method**\n\nThis is **[webpack](https://webpack.js.org/)** plugin produces single asset\nfor set of files or multiple assets with grouping technique. The set of files\nmay be splited to groups of set of files that produce group of assets.\n\nThe method of joining is defined by specified functions.\n\n\n**Advantages**:\n\n* deep webpack integration\n* possibility to group files by simple criterion\n* autorebuild and reload on source file change (due to deep integration)\n* files may be loaded and joined by path pattern or by call function\n  `require` or `import`\n\nThis join plugin is enough flexible as it allows to predefine data join\nmethod. With that it is more general and requires to specify functions\nwhich produce joining.\n\nConsider to use derivative plugins instead of this:\n\n* **[merge-webpack-plugin](https://github.com/oklas/merge-webpack-plugin)** -\n  when it's necessary to merge json data (or data loaded from another formats\n  with structured data like yaml for example).\n\n* **[intl-webpack-plugin](https://github.com/oklas/intl-webpack-plugin)** -\n  build internationalization locale assets according to component\n  internationalization approach.\n\n\n## Install\n\n```bash\nnpm install --save-dev join-webpack-plugin\n```\n\n\n## Webpack configuration\n\nThis is minimal configuration to merge json into single asset:\n\n``` javascript\nvar JoinPlugin = require(\"join-webpack-plugin\");\nconst merge = require(\"merge\");\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(json)$/i,\n        use: [\n          JoinPlugin.loader(),\n          // some preloaders\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new JoinPlugin({\n      search: './src/**/*.json',\n      join: function(common, addition) {\n        return merge.recursive(\n          common ? common : {}, JSON.parse(addition)\n        );\n      },\n      save: function(common) {\n        return JSON.stringify(common);\n      }\n    })\n  ]\n}\n```\n\nThe using this plugin directly in webpack configuration can lead to code\nduplication. A good solution in that case may be creation and sharing a new\nuseful plugin. A good starting point in this case is to do fork of\n[merge-webpack-plugin](https://github.com/oklas/merge-webpack-plugin)\nand take it as a base.\n\n## Requiring\n\n``` javascript\nvar url1 = require(\"one-of-files.ext\");\nvar url2 = require(\"another-file.ext\");\nrequire(\"third-file.ext\");\n// or describe files by pattern in plugin param\n\n// url1 and url2 will be same name refers to same file\n// which will also contain content of \"third-file.ext\"\n```\n\nSame in modern syntax:\n\n``` jsx\nimport url1 from \"one-of-files.ext\"\nimport url2 from \"another-file.ext\"\nimport \"third-file.ext\"\n// or describe files by pattern in plugin param\n```\n\nThis returns public url of file with result of joining.\nThis will be same url for each file joined together\naccording to plugin configuration.\n\nIn order to involve files into join, files must be required by `require`\nfunction or configured by `search` param of plugin configuration.\n\n\n## Plugin configuration\n\nJoinPlugin is created typically in webpack configuration file and\nwaits hash of configuration options as its create param:\n\n``` javascript\nvar JoinPlugin = require(\"join-webpack-plugin\");\n\nvar join = new JoinPlugin({\n  search: 'glob' || ['globs',...],\n  skip: 'substr' || /regexp/ || [ 'substr', /regex/, ...],\n  join: function(common, addition) { ... },\n  save: function(common) { ... },\n  group: '[name]',\n  name: '[name].[hash].[ext]',\n});\n```\n\nOptions:\n\n* **`join`** - user defined joining function (mandatory required)\n* **`save`** - user defined asset saving function (mandatory required)\n* `search` - glob pattern or pattern array of files to find and prefetch\n  see [glob](https://www.npmjs.com/package/glob) module for reference\n* `skip` - substring or regular expression or array to skip from searched results\n* `group` - default group loader option (see below)\n* `name` - default name loader option (see below)\n\nThe `search` param works like multi-require with glob patterns.\nOnly files that required by `require` function in code\nwill be loaded in that case.\n\nAny file that does not match to `search` or `skip` param and\nmatch to loader section in webpack config and is required in code\nby function `require` or `import` will be loaded and joined anyway.\n\n\n## Define joining\n\nThe joining process needs two function `join` and `save`\n(the pure functions is recommended).\n\n### joining\n\nThe user defined joining function prototype:\n\n``` javascript\njoin: function(common, addition)\n```\n\nParams:\n\n* `common` - common data structure collecting data to join. Here may be\n  any user defined data structure. At first call this param is `null`.\n  With each next call `common` is result of previous call of this function.\n* `addition` - next peace information to join. This data is passed through\n  loaders chain from source file which currenly joined.\n\n\n### saving\n\nAfter all files are loaded and collected in `common` place.\nUser defined function prototype producing the result:\n\n``` javascript\nsave: function(common)\n```\n\nThis function has the same param `common` as first param of `join` function.\nThe `common` param contains information loaded form files collected on\n`joining` step. This user defined function must process `common` collected\ninformation and must produce result string and return it.\nThe result of this function will be saved in asset.\n\n\n## Loader configuration\n\nThe `loader()` method includes join loader into loader chain.\n\n``` javascript\nvar JoinPlugin = require(\"join-webpack-plugin\");\nvar theJoin = new JoinPlugin({...})\n\n{\n  module: {\n    rules: [\n      { test: /\\.(json)$/i,\n        use: [\n          theJoin.loader({group:'[name]'}),\n          // some more pre loaders\n        ]\n      }\n    ]\n  }\n  plugins: [\n     theJoin\n  ]\n}\n\n```        \n\nPreliminary loaders must be applied before join loader. This means that\njoin loader must be final loader in loaders chain.\n\nLoader function waits hash of configuration options as its param.\nDefault values of loader may be specified in plugin configuration\ndescribed above.\n\nLoader options:\n\n* `group` - devides files into separated assets by specifying\n  groping pattern. May include template placeholders described\n  below in groupping section. Grouping is not applied if\n  value is not specified.\n* `name` - specifies destination asset file name. String value\n  may include template placeholders described below. Default\n  value is `[hash]`.\n\nConfiguration values specified directly in `loader()` override\nsame values specified as default in plugin configuration.\n\n\nThe `loader()` function may be invoked as class function if only one plugin\ninstance is passed to config. Therefore it is better to use object form\ninstead of class form:\n\n``` javascript\nvar theJoin = new JoinPlugin({...})\n\nloaders: [\n  // this form valid only for single plugin instance:\n  JoinPlugin.loader(),\n  // to avoid problems better to use always object form:\n  theJoin.loader(),\n],\n```\n\n\n## Grouping\n\nFiles may be grouped by simple criterion. Grouping criterion is\nspecified in `group` loader param. If `group` param is not\nspecified than will be only one common group where will be \nall files joined togather.\n\nGrouping criteria formed by template placeholders described\nin `interpolateName()` from [loader-utils](https://github.com/webpack/loader-utils#interpolatename) module.\nSome of that is:\n\n* `[name]` - to group files with same name set group param:\n* `[ext]` - to group files with same ext set group param:\n* `[path]` - to group files where each group contains files from same directory:\n\nAnd any derivative combinations.\n    \n\n## LICENSE\n\n#### [MIT](./LICENSE.md)\n\n[npm-image]: https://img.shields.io/npm/v/join-webpack-plugin.svg\n[npm-url]: https://npmjs.com/package/join-webpack-plugin\n[travis-image]: https://travis-ci.org/oklas/join-webpack-plugin.svg\n[travis-url]: https://travis-ci.org/oklas/join-webpack-plugin\n[cover-image]: https://img.shields.io/codecov/c/github/oklas/join-webpack-plugin.svg\n[cover-url]: https://codecov.io/gh/oklas/join-webpack-plugin\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foklas%2Fjoin-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foklas%2Fjoin-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foklas%2Fjoin-webpack-plugin/lists"}