{"id":19141203,"url":"https://github.com/arzyu/airpack","last_synced_at":"2025-05-06T23:27:43.037Z","repository":{"id":48865154,"uuid":"162312949","full_name":"arzyu/airpack","owner":"arzyu","description":"A better solution for sharing webpack config in multiple projects. It gives webpack the ability to read configs from dependencies and merge them in a more appropriate way.","archived":false,"fork":false,"pushed_at":"2022-11-30T12:34:36.000Z","size":362,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-26T18:47:21.665Z","etag":null,"topics":["webpack","webpack-cli","webpack-config"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arzyu.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-18T16:02:36.000Z","updated_at":"2023-04-01T13:44:08.000Z","dependencies_parsed_at":"2023-01-22T16:00:16.399Z","dependency_job_id":null,"html_url":"https://github.com/arzyu/airpack","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arzyu%2Fairpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arzyu%2Fairpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arzyu%2Fairpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arzyu%2Fairpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arzyu","download_url":"https://codeload.github.com/arzyu/airpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223369836,"owners_count":17134564,"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":["webpack","webpack-cli","webpack-config"],"created_at":"2024-11-09T07:21:48.250Z","updated_at":"2024-11-09T07:21:48.930Z","avatar_url":"https://github.com/arzyu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# airpack\n\n![npm package version](https://img.shields.io/npm/v/airpack) ![npm peer dependency version](https://img.shields.io/npm/dependency-version/airpack/peer/webpack-cli) ![build status](https://img.shields.io/github/workflow/status/arzyu/airpack/Build)\n\nairpack is a wrapper for webpack-cli. Designed to allow you to use webpack more elegantly.\n\nWhen airpack loads the webpack-cli module on the node, it adds functional enhancement patches to webpack-cli. This patch allows webpack-cli to automatically read webpack configurations from multiple locations (project dependencies, project directories, command line parameters) in a certain priority order, and then merge these webpack configurations [in a more appropriate way](#configuration-file-merge-logic).\n\nThere are many benefits to using webpack configuration in this way:\n\n * The project directory will be cleaner, with only project-related logic, no `.babelrc.*`, `postcss.config.js`, `.eslintrc.*`,..., and even `webpack.config.*` is not needed. Project templated will be more convenient. See [react-webpack-playground](https://github.com/arzyu/react-webpack-playground).\n\n * With fewer `devDependencies`, the length of the dependency list is shortened from one arm to one finger, and all dependencies related to webpack configuration are placed in a separate `webpack-config-*` package.\n\n * Using a separate `webpack-config-*` package is easier to manage, version control and iteration will be more convenient, and it will also facilitate sharing. It is more appropriate to publish the package under your own or organization's name, such as [@arzyu/webpack-config-web](https://github.com/arzyu/webpack-config-web). Complex configurations can also be split into multiple packages, and airpack can help you merge them.\n\n## Installation\n\n```shell\nnpm add --save-dev airpack\n```\n\n## Usage \u0026 How it works\n\n```shell\n# view help\n$(npm bin)/airpack --help\n```\n```\nUsage: airpack [options] [other-webpack-options]\n\nOptions:\n  -s, --server                    Run webpack-dev-server\n  -c, --config \u003cfile|package...\u003e  Specify webpack configs (default: [])\n  --no-autoconfig                 Only load webpack configs from '-c, --config ...' option\n  --print                         Print webpack configs with paths, without running webpack\n  -v, --version                   Print airpack version\n  -h, --help                      Print this help\n```\n\nTaking the webpack configuration [@arzyu/webpack-config-web](https://github.com/arzyu/webpack-config-web) as an example, `package.json` should look like this:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"NODE_ENV=development airpack --server\",\n    \"build\": \"NODE_ENV=production airpack\"\n  },\n  \"devDependencies\": {\n    \"@arzyu/webpack-config-web\": \"^0.1.3\",\n    \"airpack\": \"^1.0.1\",\n    \"webpack\": \"^5.33.2\",\n    \"webpack-cli\": \"^4.7.2\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n}\n```\n\n* `npm run dev`, start local development service (invoke `webpack serve`)\n* `npm run build`, run packaging (invoke `webpack`)\n\n### Configuration file search order and priority\n\nWhen using airpack without specifying the `--no-autoconfig` parameter, it will help us automatically collect the webpack configuration. The logical sequence is as follows:\n\n * Find **all** `webpack-config-*` items in the project's dependencies and add them to the end of the configuration list\n\n * If there is a `webpack.config.*` file in the project root directory, **the one** recognized by webpack as the default configuration will be appended to the end of the configuration list\n\n * If there are webpack configuration files or packages imported with `airpack -c, --config`, add **them** to the end of the configuration list in turn\n\nIn the configuration list, the lower configuration has a higher priority and will overwrite the items in the previous configuration when merging.\n\nIn the above example, if we run `airpack -c file-a.js -c package-b -c package-c/internal`, we may get a configuration list like this:\n\n```json\n[\n  \"@arzyu/webpack-config-web\",\n  \"webpack.config.js\",\n  \"file-a.js\",\n  \"package-b\",\n  \"package-c/internal\"\n]\n```\n\nNote: `airpack -c package-c/internal` is a way of introducing configuration, which allows you to include multiple webpack configurations in one package. In a typical scenario, for example, when doing electron-related development, you can make a `webpack-config-electron` package. In this package, write two configurations, `webpack-config-eletron/main` and `webpack-config-eletron/renderer`.\n\nIf you don't want airpack to automatically collect the webpack configuration, you can use the `--no-autoconfig` parameter, which must be used with the `-c, --config` parameter to manually specify the configuration file.\n\n```shell\nairpack --no-autoconfig -c config-a -c config-b\n```\n\nIn this way, the final webpack configuration list is `[\"config-a\", \"config-b\"]`.\n\n### Configuration file merge logic\n\nAfter collecting the list of webpack configurations, we need to perform a merge operation on these configurations.\n\nAlthough webpack-cli provides the `--merge` parameter to implement the function of merging configuration, the way of merging configuration is simply to merge all configurations into one object, so that webpack's multi-configuration function cannot be used. Therefore, airpack rewrite the merge logic, only merge the configuration objects with the same `name` attribute, and merge the configuration objects without the `name` attribute into all other configuration objects. The specific steps are as follows.\n\nSuppose we have collected such a configuration list content:\n\n```js\n[\n  { \"a\": \"from a\", \"x\": \"override by a\" },\n  { \"b\": \"from b\", \"x\": \"override by b\", name: \"group_1\" },\n  { \"c\": \"from c\", \"x\": \"override by c\", name: \"group_2\" },\n  { \"d\": \"from d\", \"x\": \"override by d\" },\n  { \"e\": \"from e\", \"x\": \"override by e\", name: \"group_1\" },\n]\n```\n\nStep 1. Group all configuration objects according to the `name` attribute, and keep the priority order in the group:\n\n```js\n{\n  \"undefined\": [\n    { \"a\": \"from a\", \"x\": \"override by a\" },\n    { \"d\": \"from d\", \"x\": \"override by d\" }\n  ],\n  \"group_1\": [\n    { \"b\": \"from b\", \"x\": \"override by b\", \"name\": \"group_1\" },\n    { \"e\": \"from e\", \"x\": \"override by e\", \"name\": \"group_1\" }\n  ],\n  \"group_2\": [\n    { \"c\": \"from c\", \"x\": \"override by c\", \"name\": \"group_2\" }\n  ]\n}\n```\n\nStep 2. Merge each group separately:\n\n```js\n{\n  \"undefined\": {\n    \"a\": \"from a\",\n    \"d\": \"from d\",\n    \"x\": \"override by d\"\n  },\n  \"group_1\": {\n    \"b\": \"from b\",\n    \"e\": \"from e\",\n    \"x\": \"override by e\",\n    \"name\": \"group_1\"\n  },\n  \"group_2\": {\n    \"c\": \"from c\",\n    \"x\": \"override by c\",\n    \"name\": \"group_2\"\n  }\n}\n```\n\nStep 3. Combine the `undefined` group without the `name` attribute with other groups respectively to get the final webpack configuration:\n\n```js\n[\n  {\n    \"a\": \"from a\",\n    \"d\": \"from d\",\n    \"b\": \"from b\",\n    \"e\": \"from e\",\n    \"x\": \"override by e\",\n    \"name\": \"group_1\"\n  },\n  {\n    \"a\": \"from a\",\n    \"d\": \"from d\",\n    \"c\": \"from c\",\n    \"x\": \"override by c\",\n    \"name\": \"group_2\"\n  }\n]\n```\n\nNote: If all configuration objects in the configuration list do not have a `name` attribute, all configuration objects will be merged into one object, which is the same as the merge logic of webpack-cli.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farzyu%2Fairpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farzyu%2Fairpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farzyu%2Fairpack/lists"}