⚠️ 注意：
- 该插件仅支持 [email protected] 以上的版本。
- 该插件仅为使用原生小程序平台提供功能做 webpack 编译支持，因此不提供
虚拟DOM(Visual DOM)支持。如果你喜欢VUE的开发模式，建议使用 mpvue 等其他框架进行开发。
- 支持多个平台：微信小程序(wechat)、支付宝小程序(alipay)、百度小程序(baidu)。
- 支持 webpack 所有的功能，包括但不限于插件(plugins)、加载器(loaders)、解析器(resolvers)等。
- 支持通过
npm install安装第三方的小程序模块(页面，组件等)，也就是说我们可以开发通用的组件并发布到npm上提供给其他小程序使用。
- mpx-examples -
mpx-webpack-plugin插件示例项目。 - mpx-workflow - 基于
mpx-webpack-plugin编写的工作流（😂适合拿来主义者😂）。 - mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。
- wepy - 小程序组件化开发框架。类 vue 风格，已经被官方(Tencent)收编。
- wxapp-webpack-plugin - 📦 微信小程序 webpack 插件。也是单纯的 webpack 编译支持。
- 微信小程序开发文档
- 支付宝小程序开发文档
- 百度小程序开发文档
npm i webpack webpack-cli --save-dev
npm i mpx-webpack-plugin --save-dev
{
"name": "awesome-miniprogram",
"version": "1.0.0",
...
"scripts": {
"watch": "npm run build -- --wacth", /*< 开发模式 >*/
"build": "webpack --config=./webpack.config.js" /*< 生产模式 >*/
}
}💡小技巧：通过
webpack --env.*可以添加自定的命令行参数，例如：我们可以通过webpack --env.target=<production|development>来代替以前使用cross-env NODE_ENV=<production|development> webpack来区分开发环境和生产环境。参考文档：Environment Variables
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 导出多份配置文件，可以一次性编译成多个平台的小程序。
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" })
]
},
];定义小程序入口点可以通过以下 3 种配置方式：
-
- 格式：
entry: string - 示例：
entry: "./src/app"
- 格式：
-
- 格式：
entry: {[entryChunkName: string]: string} - 示例：
entry: { "app": "./src/app" }
- 格式：
-
- 格式：
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)。
| 类型 | 名称 | 默认值 | 说明 |
|---|---|---|---|
| {string} | name | "app" |
指定小程序入口点的名称。如果使用对象语法(Object Syntax)配置 entry，则插件通过该字段查找小程序的入口点。 |
| {string} | platform | "wechat" |
指定运行的小程序平台，可选值：["wechat", "alipay", "baidu"]。
|
| {Array<string>} | chunks | undefined |
当使用 splitChunks 分离公共模块后，通过 chunks 将公共模块插入到 app.js 之前。 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent