{"id":21937617,"url":"https://github.com/cap32/wxapp-webpack-plugin","last_synced_at":"2025-04-07T12:07:29.915Z","repository":{"id":54475531,"uuid":"87201296","full_name":"Cap32/wxapp-webpack-plugin","owner":"Cap32","description":"📦 微信小程序 webpack 插件","archived":false,"fork":false,"pushed_at":"2019-05-15T15:56:23.000Z","size":145,"stargazers_count":202,"open_issues_count":21,"forks_count":60,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T10:11:09.372Z","etag":null,"topics":["alipay","alipay-mini-program","mini-program","weapp","webpack","webpack-plugin","wechat","wechat-mini-program","weixin","wxapp"],"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/Cap32.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-04-04T15:09:41.000Z","updated_at":"2024-05-07T02:08:13.000Z","dependencies_parsed_at":"2022-08-13T17:00:38.451Z","dependency_job_id":null,"html_url":"https://github.com/Cap32/wxapp-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Fwxapp-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Fwxapp-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Fwxapp-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Fwxapp-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cap32","download_url":"https://codeload.github.com/Cap32/wxapp-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"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":["alipay","alipay-mini-program","mini-program","weapp","webpack","webpack-plugin","wechat","wechat-mini-program","weixin","wxapp"],"created_at":"2024-11-29T01:20:47.236Z","updated_at":"2025-04-07T12:07:29.895Z","avatar_url":"https://github.com/Cap32.png","language":"JavaScript","readme":"# wxapp-webpack-plugin\n\n[![Build Status](https://travis-ci.org/Cap32/wxapp-webpack-plugin.svg?branch=master)](https://travis-ci.org/Cap32/wxapp-webpack-plugin) [![Build status](https://ci.appveyor.com/api/projects/status/7scpj8g00a4cacpr/branch/master?svg=true)](https://ci.appveyor.com/project/Cap32/wxapp-webpack-plugin/branch/master)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n\n微信小程序 webpack 插件\n\n\n###### 为什么要使用 webpack\n\n很多前端开发者都使用过 [webpack](https://webpack.js.org/)，通过 webpack 开发 JavaScript 项目可以带来很多好处\n\n- 支持通过 `yarn` 或 `npm` 引入和使用 `node_modules` 模块\n- 支持丰富且灵活的 `loaders` 和 `plugins`\n- 支持 `alias`\n- 还有很多...\n\n\n###### 为什么要使用这个插件\n\n- 微信小程序开发需要有多个入口文件（如 `app.js`, `app.json`, `pages/index/index.js` 等等），使用这个插件只需要引入 `app.js` 即可，其余文件将会被自动引入\n- 若多个入口文件（如 `pages/index/index.js` 和 `pages/logs/logs.js`）引入有相同的模块，这个插件能避免重复打包相同模块\n- 支持自动复制 `app.json` 上的 `tabbar` 图片 (v0.17.0 或以上)\n\n\n## 使用方法\n\n#### 安装\n\n```bash\nyarn add -D wxapp-webpack-plugin\n```\n\n#### 配置 webpack\n\n1. 在 `entry` 上引入 `{ app: './src/app.js' }`, 这里的 `./src/app.js` 为微信小程序开发所需的 `app.js`。**注意** `key` 必须为 `app`，`value` 支持[数组](https://webpack.js.org/configuration/entry-context/#entry)）\n\n2. 在 `output` 上设置 `filename: '[name].js'。` **注意** 这里 `[name].js` 是因为 `webpack` 将会打包生成多个文件，文件名称将以 `[name]` 规则来输出\n\n3. 添加 `new WXAppWebpackPlugin()` 到 `plugins`\n\n###### `loader` 的使用提示\n\n为了使 `webpack` 能编译和输出非 `.js` 文件，配置时要按需添加各种 `loaders`。这里作者推荐使用以下几个对微信小程序开发很有用的 `loaders`：\n\n- [file-loader](https://github.com/webpack-contrib/file-loader): 用于输出 `*.json`，`*.wxss`，`*.jpg` 之类的文件\n- [css-loader](https://github.com/webpack-contrib/css-loader): 使 `webpack` 能编译或处理 `*.wxss` 上引用的文件\n- [wxml-loader](https://github.com/Cap32/wxml-loader): 使 `webpack` 能编译或处理 `*.wxml` 上引用的文件\n\n开发者也可以根据自身需求和习惯，使用 `sass-loader` 之类的 `loader`。\n\n\n**完整的项目开发脚手架，请查看 [wxapp-boilerplate](https://github.com/cantonjs/wxapp-boilerplate)**\n\n\n## API\n\n#### WXAppWebpackPlugin\n\n###### 用法\n\nwebpack.config.babel.js\n\n```js\nimport WXAppWebpackPlugin from 'wxapp-webpack-plugin';\nexport default {\n  // ...configs,\n  plugins: [\n    // ...other,\n    new WXAppWebpackPlugin(options)\n  ],\n};\n```\n\n\n###### Options\n\n所有 `Options` 均为可选\n\n- `clear` (\\\u003cBoolean\\\u003e): 在启动 `webpack` 时清空 `dist` 目录。默认为 `true`\n- `commonModuleName` (\\\u003cString\\\u003e): 公共 `js` 文件名。默认为 `common.js`\n- `extensions` (\\\u003cArray\\\u003cString\\\u003e\\\u003e): 脚本文件后缀名。默认为 `['.js']`\n\n#### `Targets`\n\nWebpack target 值，目前有 `Targets.Wechat` 和 `Targets.Alipay`，如果不配置，webpack target 将会自动设为 `Targets.Wechat`。如果需要开发支付宝小程序，则改为 `Targets.Alipay`。开发者也可以通过 `process.env.TARGET` 之类的配置来动态输出。\n\n###### 示例\n\nwebpack.config.babel.js\n\n```js\nimport WXAppWebpackPlugin, { Targets } from 'wxapp-webpack-plugin';\nexport default {\n  // ...configs,\n  target: Targets[process.env.TARGET || 'Wechat'],\n};\n```\n\n## 提示\n\n- 程序的开发方式与 [微信小程序开发文档](https://mp.weixin.qq.com/debug/wxadoc/dev/) 一样，开发者需要在 `src` （源）目录创建 `app.js`、`app.json`、`app.wxss`、`pages/index/index.js` 之类的文件进行开发\n\n\n## License\n\nMIT © Cap32\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcap32%2Fwxapp-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcap32%2Fwxapp-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcap32%2Fwxapp-webpack-plugin/lists"}