Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guless/mpx-webpack-plugin
原生小程序开发定制 webpack 插件套装
https://github.com/guless/mpx-webpack-plugin
alipay-app baidu-app mini-programs webpack-loader webpack-plugin wechat-app
Last synced: about 1 month ago
JSON representation
原生小程序开发定制 webpack 插件套装
- Host: GitHub
- URL: https://github.com/guless/mpx-webpack-plugin
- Owner: guless
- Created: 2018-05-25T03:14:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-06T05:11:52.000Z (about 6 years ago)
- Last Synced: 2024-11-05T08:39:04.390Z (about 2 months ago)
- Topics: alipay-app, baidu-app, mini-programs, webpack-loader, webpack-plugin, wechat-app
- Language: JavaScript
- Homepage: https://mpx.guless.com/
- Size: 209 KB
- Stars: 39
- Watchers: 5
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
原生小程序开发套装(Mini Program X)
-------------------------------
> ⚠️注意：
> - 该插件仅支持 [email protected] 以上的版本。
> - 该插件仅为使用原生小程序平台提供功能做 webpack 编译支持，因此不提供 `虚拟DOM(Visual DOM)` 支持。如果你喜欢 `VUE` 的开发模式，建议使用 [mpvue](https://github.com/Meituan-Dianping/mpvue) 等其他框架进行开发。
功能特点
-------
- 支持多个平台：微信小程序(wechat)、支付宝小程序(alipay)、百度小程序(baidu)。
- 支持 [**webpack**](https://webpack.js.org/) 所有的功能，包括但不限于插件(plugins)、加载器(loaders)、解析器(resolvers)等。
- 支持通过 `npm install` 安装第三方的小程序模块(页面，组件等)，也就是说我们可以开发通用的组件并发布到 `npm` 上提供给其他小程序使用。
相关资料
-------
- [**mpx-examples**](./examples) - `mpx-webpack-plugin` 插件示例项目。
- [**mpx-workflow**](https://github.com/guless/mpx-workflow/) - 基于 `mpx-webpack-plugin` 编写的工作流（😂适合拿来主义者😂）。
- [**mpvue**](https://github.com/Meituan-Dianping/mpvue) - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。
- [**wepy**](https://github.com/Tencent/wepy) - 小程序组件化开发框架。类 vue 风格，已经被官方(Tencent)收编。
- [**wxapp-webpack-plugin**](https://github.com/Cap32/wxapp-webpack-plugin) - 📦 微信小程序 webpack 插件。也是单纯的 webpack 编译支持。
- [**微信小程序开发文档**](https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html)
- [**支付宝小程序开发文档**](https://docs.alipay.com/mini/framework/overview)
- [**百度小程序开发文档**](https://smartapp.baidu.com/docs/develop/tutorial/index/)
起步
----
```
npm i webpack webpack-cli --save-dev
npm i mpx-webpack-plugin --save-dev
```
配置 npm scripts
----------------
```js
{
"name": "awesome-miniprogram",
"version": "1.0.0",
...
"scripts": {
"watch": "npm run build -- --wacth", /*< 开发模式 >*/
"build": "webpack --config=./webpack.config.js" /*< 生产模式 >*/
}
}
```
> 💡小技巧：通过 `webpack --env.*` 可以添加自定的命令行参数，例如：我们可以通过 `webpack --env.target=` 来代替以前使用 `cross-env NODE_ENV= webpack` 来区分开发环境和生产环境。参考文档：[Environment Variables](https://webpack.js.org/guides/environment-variables/)
配置 webpack.config.js
---------------------
```js
const MPXPlugin = require("mpx-webpack-plugin");
const path = require("path");
module.exports = {
"context": __dirname,
"entry": "./src/app", // 具体如何配置入口点，请参考下面的【小程序入口点(Entry-Points)】。
"output": {
"path": path.resolve(__dirname, "./dist"),
"filename": "[name].js"
},
"plugins": [
new MPXPlugin({ "platform": "wechat" })
]
};
```
通过 `webpack.config.js` 导出多份配置文件，可以一次性编译成多个平台的小程序。
```js
const MPXPlugin = require("mpx-webpack-plugin");
const path = require("path");
module.exports = [
{
"context": __dirname,
"entry": "./src/app", // 具体如何配置入口点，请参考下面的【小程序入口点(Entry-Points)】。
"output": {
"path": path.resolve(__dirname, "./dist/wechat/"),
"filename": "[name].js"
},
"plugins": [
new MPXPlugin({ "platform": "wechat" })
]
},
{
"context": __dirname,
"entry": "./src/app", // 具体如何配置入口点，请参考下面的【小程序入口点(Entry-Points)】。
"output": {
"path": path.resolve(__dirname, "./dist/baidu/"),
"filename": "[name].js"
},
"plugins": [
new MPXPlugin({ "platform": "baidu" })
]
},
];
```
### 小程序入口点(Entry-Points)
定义小程序入口点可以通过以下 3 种配置方式：
- [单一入口点语法(Single Entry Syntax)](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax)
- 格式：`entry: string`
- 示例：
```
entry: "./src/app"
```
- [对象语法(Object Syntax)](https://webpack.js.org/concepts/entry-points/#object-syntax)
- 格式：`entry: {[entryChunkName: string]: string}`
- 示例：
```
entry: { "app": "./src/app" }
```
- [动态入口点语法(Dynamic Syntax)](https://webpack.js.org/configuration/entry-context/#dynamic-entry)
- 格式：`entry: () => (Single Entry Syntax)|(Object Syntax)|Promise<(Single Entry Syntax)|(Object Syntax)>`
- 示例：
```
entry: () => "./src/app"
entry: () => ({ "app": "./src/app" })
entry: () => Promise.resolve("./src/app")
entry: () => Promise.resolve({ "app": "./src/app" })
```
>使用对象语法(Object Syntax)指定小程序入口点时，建议使用 `"app"` 作为入口点的名称(entryChunkName)。
MPXPlugin( options )
--------------------
### Options
类型 | 名称 | 默认值 | 说明
----------|-----------------------|------------------|--------------------
{string} | name | `"app"` | 指定小程序入口点的名称。如果使用对象语法(Object Syntax)配置 `entry`，则插件通过该字段查找小程序的入口点。
{string} | platform | `"wechat"` | 指定运行的小程序平台，可选值：`["wechat", "alipay", "baidu"]`。
- `"wechat"`：微信小程序。
- `"alipay"`：支付宝小程序。
- `"baidu"`：百度小程序。
{Array<string>} | chunks | `undefined` | 当使用 `splitChunks` 分离公共模块后，通过 `chunks` 将公共模块插入到 `app.js` 之前。