mpx-webpack-plugin

原生小程序开发套装(Mini Program X) -------------------------------

Usage no npm install needed!

<script type="module">
  import mpxWebpackPlugin from 'https://cdn.skypack.dev/mpx-webpack-plugin';
</script>

README

原生小程序开发套装(Mini Program X)

⚠️注意:

  • 该插件仅支持 webpack@4.0 以上的版本。
  • 该插件仅为使用原生小程序平台提供功能做 webpack 编译支持,因此不提供 虚拟DOM(Visual DOM) 支持。如果你喜欢 VUE 的开发模式,建议使用 mpvue 等其他框架进行开发。

功能特点

  • 支持多个平台:微信小程序(wechat)、支付宝小程序(alipay)、百度小程序(baidu)。
  • 支持 webpack 所有的功能,包括但不限于插件(plugins)、加载器(loaders)、解析器(resolvers)等。
  • 支持通过 npm install 安装第三方的小程序模块(页面,组件等),也就是说我们可以开发通用的组件并发布到 npm 上提供给其他小程序使用。

相关资料

起步

npm i webpack webpack-cli --save-dev
npm i mpx-webpack-plugin --save-dev

配置 npm scripts

{
    "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

配置 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"),
        "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" })
        ]
    },
];

小程序入口点(Entry-Points)

定义小程序入口点可以通过以下 3 种配置方式:

使用对象语法(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 之前。