{"id":13440164,"url":"https://github.com/realywithoutname/mini-program-webpack-loader","last_synced_at":"2025-10-11T18:17:11.962Z","repository":{"id":44149466,"uuid":"134505040","full_name":"realywithoutname/mini-program-webpack-loader","owner":"realywithoutname","description":"基于 webpack  的小程序构建工具","archived":false,"fork":false,"pushed_at":"2023-07-11T13:16:06.000Z","size":720,"stargazers_count":94,"open_issues_count":12,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-16T02:18:03.182Z","etag":null,"topics":["weapp","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/realywithoutname.png","metadata":{"files":{"readme":"README.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-23T02:59:32.000Z","updated_at":"2024-10-17T02:17:00.000Z","dependencies_parsed_at":"2024-10-27T23:46:23.388Z","dependency_job_id":"14c92e78-9497-4a31-a663-0a43f38897ad","html_url":"https://github.com/realywithoutname/mini-program-webpack-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/realywithoutname/mini-program-webpack-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realywithoutname%2Fmini-program-webpack-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realywithoutname%2Fmini-program-webpack-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realywithoutname%2Fmini-program-webpack-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realywithoutname%2Fmini-program-webpack-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/realywithoutname","download_url":"https://codeload.github.com/realywithoutname/mini-program-webpack-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realywithoutname%2Fmini-program-webpack-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008301,"owners_count":26084429,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["weapp","webpack-loader"],"created_at":"2024-07-31T03:01:20.341Z","updated_at":"2025-10-11T18:17:11.914Z","avatar_url":"https://github.com/realywithoutname.png","language":"JavaScript","readme":"\u003e 由于很久没有写小程序了，所以这个工具可能不维护了\n\n\n## mini-program-webpack-loader\n\n基于 webpack 4.0 的小程序打包工具。\n\n**项目依赖 async/await, Set/Map, spread 等 es6+ 语法**\n\n## 安装\n\n``` bash\n  $ npm i mini-program-webpack-loader --dev\n```\n\n## 介绍\n\n该工具主要解决小程序难以集成更多的成熟工具的问题。其次支持多个小程序项目共建。\n\n该工具由两部分组成，loader 和 plugin。\n\n### 能力\n- 支持在小程序项目中使用 webpack 的所有能力\n- 支持在 wxml, wxss, wxs, json 文件中使用模块别名\n- 支持全局注册自定义组件\n- 支持多小程序项目合并\n- 支持小程序项目分析\n\n### 插件\n\n#### 使用\n\n``` javascript\n  const MiniPlugin = require('mini-program-webpack-loader').plugin;\n\n  module.exports = {\n    ..., // webpack 其他设置\n    plugins: [\n      new MiniPlugin({\n        ... // 参数\n      })\n    ],\n    ... // webpack 其他设置\n  }\n```\n\n#### 参数\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd rowspan=\"3\"\u003eextfile\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e`true`\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e打包主包下的 ext.json(默认值)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e`false`\u003c/td\u003e\n      \u003ctd\u003e\n        不打包 ext.json\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e`String`\u003c/td\u003e\n      \u003ctd\u003e\n        extfile 文件路径\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`ignoreTabbar`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Boolean`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e是否把 tabbar 中的图片添加到构建，考虑到很多场景除了 tabbar 资源，可能还存在其他资源不能被插件索引到，可以通过 copy 插件复制资源，所以插件默认不会构建 tabbar 依赖的图片内容\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`silently`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Boolean`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e是否输出构建信息，默认 `false`，输出构建信息\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`optimizeMainPackage`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Boolean`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e是否优化主包体积。在一些场景下，组件只在多个分包使用，于是组件只能放到主包内，插件提供配置，自动拷贝这些组件到分包内，以减小主包体积，默认值为 `true`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003esetSubPackageCacheGroup(miniLoader, appJson)\u003c/p\u003e\n      \u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e`Function`\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003e根据最后输出的 `app.json` 设置 `cacheGroup`\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`useFinalCallback`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Boolean`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e是否使用自定义的构建完成回调，默认使用插件内置的回调来输出构建信息。\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`compilationFinish(err, stat, appJson)`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Function`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e打包完成后回调\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003eresources\u003c/p\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e`Array`\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003e提供资源的目录。\u003c/p\u003e\n        \u003cp\u003e除了所有入口所在的目录，src目录，node_modules，其他目录需要在这里添加否则可能导致路径计算错误。\u003c/p\u003e\n        \u003cp\u003e\n          \u003cbr\u003e如\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003e`path/to/src/pages/one/index.json`\u003c/span\u003e依赖了一个绝对路径\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003e`\n            \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003epath/to/shared/conponents/List/index.json\u003c/span\u003e`\n            \u003cspan style=\"color: rgb(0, 51, 102);\"\u003e。\u003c/span\u003e\u003c/span\u003e\n        \u003c/p\u003e\n        \u003cp\u003e其中\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003e`path/to/src`\u003c/span\u003e为项目目录，\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003e`path/to/shared`\u003c/span\u003e\n          \u003cspan\u003e\u003c/span\u003e为多个项目公用的目录。\u003c/p\u003e\n        \u003cp\u003e\n          \u003cbr\u003e则必须设置\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003e`resources: ['path/to/shared']`\u003c/span\u003e。则最终打包会把\n          \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003epath/to/shared/conponents 和\n            \u003cspan style=\"color: #ce9178;\" data-mce-style=\"color: #ce9178;\"\u003epath/to/src/pages 输出到同级目录。\u003c/span\u003e\u003c/span\u003e\n        \u003c/p\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003eentry\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e`Object`\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e每个 key 必须为 webpack 对应的 entry 配置的绝对路径。值为一个对象。\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.accept`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Object`\u003c/span\u003e\n        \u003cbr\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003eaccept 会从对应的入口配置中读取对应的字段，进行保留。即如果 entry 中设置了入口文件配置，则不在 accept 中的字段，都会被直接删除。\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.accept[property]`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`any`\u003c/span\u003e\n        \u003cbr\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003e对于非特殊说明的字段，因为对应入口有了配置就会删除不在 accept 对应中的字段，如果希望保留其中部分字段可以通过设置对应 key 的值为 `true`\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.accept.pages`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Array` | `true`\u003c/span\u003e\n        \u003cbr\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003e如果值是数组，则会从当前入口文件的 `pages` 字段获取对应的页面，其他页面会被丢弃。`true` 值会保留所有的页面，配合 `ignore.pages` 可以丢弃其中部分不用的页面\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.accept.usingComponents`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Array` | `true`\u003c/span\u003e\n        \u003cbr\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003e如果值是数组，元素的值应该是入口文件的 `usingConponents` 字段对应的key，表示要保留的组件，不在数组中的其他组件会被丢弃。`true` 值会保留所有的组件，配合 `ignore.usingComponents` 可以丢弃其中部分不用的组件\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.ignore`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e`Object`\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cp\u003eignore 配置用于删除通过 accept 保留的配置。目前仅支持 pages。\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.ignore.pages`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Array`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e可以删除 pages 和 subpackages 里面的页面\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`entry.ignore.usingComponents`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e\n        \u003cspan\u003e`Array`\u003c/span\u003e\n        \u003cbr data-mce-bogus=\"1\"\u003e\u003c/td\u003e\n      \u003ctd colspan=\"1\"\u003e不加载对应入口文件 `usingConponents` 字段对应组件\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n关于插件的其他介绍可以访问 [这里](https://github.com/realywithoutname/mini-program-webpack-loader/wiki/%E5%85%B3%E4%BA%8E-loader)\n\n### Loader\n关于 loader 的其他介绍可以访问 [这里](https://github.com/realywithoutname/mini-program-webpack-loader/wiki/%E5%85%B3%E4%BA%8E-loader)\n\n关于 loader 的配置可以查看 [这个示例](https://github.com/realywithoutname/mini-loader-plugin-demo/blob/master/build/webpack.config.base.loaders.js)\n\n### 关于多项目共建\n在这里共建的意思是：多个小程序项目的功能共用。其中包括页面，组件，工具函数的共用。\n\n#### 页面共用\n通过 webpack 的 entry 设置多个 json 配置文件，插件根据这些文件进行解析依赖的页面和组件。对于不需要的配置可以通过插件配置来进行管理。\n\n```JavaScript\n  module.exports = {\n    entry: [\n      'path/dir-one/src/app.json',\n      'path/dir-two/src/app.json'\n    ],\n    ...,\n    plugins: [\n      new MiniPlugin({})\n    ],\n    ...\n  }\n```\n在有多个不同的小程序项目，我们称第一个入口为主入口，像 ext.json 这样的文件将从从这个主入口对应的目录进行读取。\n\n#### 组件共用\n组件共用主要借用 webpack 的 resolve.alias 的能力，在开发中我们只需要在 webpack 配置中设置相应的配置，即可在代码中使用绝对的路径加载文件。\n下面以使用 `path/dir-two` 这个项目中的 `base-component` 组件为例，展示如何在另外个项目中使用它。\n\n``` JavaScript\n  const DIR_TWO = resolve(__dirname, 'DIR_TWO')\n  module.exports = {\n    entry: [\n      'path/dir-one/app.json'\n    ],\n    resolve: {\n      alias: {\n        'project-two': DIR_TWO\n      }\n    },\n    ...,\n    plugins: [\n      new MiniPlugin({\n        // 这个配置即可保证 `dir-two` 目录下的文件正确的输出到希望输出的目录中\n        resources: [\n          DIR_TWO\n        ]\n      })\n    ],\n    ...\n  }\n```\n\n在需要使用这个组件的地方使用即可\n\n``` json\n  {\n    \"usingComponents\": {\n      \"base-component\": \"project-two/path/to/project-two/index\"\n    }\n  }\n```\n\n### 辅助方法\n- `moduleOnlyUsedBySubpackages(module): Boolean` 查询模块是否只在子包中使用\n- `moduleUsedBySubpackage(module, root): Boolean` 查询模块是否在特定子包中使用\n- `moduleOnlyUsedBySubPackage(module, root): Boolean` 查询模块是否只在特定子包使用\n- `pathInSubpackage(path): Boolean` 查询指定路径是否在子包中\n- `getAssetContent(file, compilation): String` 获取某个文件的内容\n- `getAppJson(): Object` 获取最终的 app.json 内容\n","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealywithoutname%2Fmini-program-webpack-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealywithoutname%2Fmini-program-webpack-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealywithoutname%2Fmini-program-webpack-loader/lists"}