wxapp-plugin

微信小程序打包 webpack 插件

功能特性

• 自动入口管理: 只需引入 app.js，插件自动识别并引入 app.json 中配置的所有页面和组件
• 公共模块提取: 自动提取多个页面共用的模块，避免重复打包
• TabBar 图标处理: 自动复制 app.json 中配置的 tabBar 图片资源
• 分包打包支持: 完美支持微信小程序分包机制
• 自定义 TabBar 支持: 自动识别并处理自定义 tabBar 组件

安装

yarn add -D wxapp-plugin
# 或
npm install -D wxapp-plugin

使用方法

const WXAppPlugin = require('wxapp-plugin');

module.exports = {
  entry: './src/app.js',
  plugins: [
    new WXAppPlugin({
      // 配置选项
    })
  ]
};

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | clear | boolean | true | 编译前清空输出目录 | | include | array | [] | 额外包含的文件路径 | | exclude | array | [] | 排除的文件路径 | | dot | boolean | false | 是否包含 .dot 文件 | | extensions | array | ['.js'] | 脚本文件扩展名列表 | | commonModuleName | string | 'common.js' | 公共模块文件名 | | enforceTarget | boolean | true | 是否强制设置 target 为 Wechat | | assetsChunkName | string | '__assets_chunk_name__' | 资源 chunk 名称 | | appJSONFile | string | 'app.json' | app.json 文件路径 |

核心功能说明

入口自动收集

插件会自动从 app.json 中读取：

• pages - 主包页面列表
• subPackages - 分包配置
• usingComponents - 页面组件引用
• tabBar - tabBar 配置及图标

公共模块提取

通过 CommonsChunk 机制，自动识别并提取多个页面共用的模块，减少包体积。

TabBar 图标处理

自动复制 app.json 中 tabBar 配置的图标文件到输出目录，并添加到编译依赖中以便热更新。

项目结构

wxapp-plugin/
├── src/
│   ├── index.js          # 插件主入口
│   ├── main.js           # 核心编译流程
│   ├── entry.js          # 入口文件收集
│   ├── getAppJson.js     # app.json 解析
│   ├── applyCommonsChunk.js  # 公共模块处理
│   ├── addScriptEntry.js     # 脚本入口添加
│   ├── compileAssets.js      # 资源编译
│   ├── tabBarIcons.js        # TabBar 图标处理
│   └── utils.js          # 工具函数
├── package.json
└── README.md

依赖

• webpack ^3.12.0
• fs-extra ^9.1.0
• globby ^11.0.3
• lodash ^4.17.21
• webpack-sources ^2.2.0

许可证

ISC

参考

• 微信小程序官方文档