/miniprogram-webpack

使用 webpack4 搭建工程化开框架发微信小程序

Primary LanguageJavaScript

小程序工程化实战 + webpack

webpack 已升级到 webpack5webpack5 分支 建议使用 webpack5 分支

基于 webpack4 的小程序打包工具 支持:

  • es6、Promise、async/await
  • scss

要求准备

  • node >= 12
  • 小程序开发者工具版本:Stable 1.05.2111300, 用其他版本可能会有异常,无法运行项目,这是开发者工具的问题

初始化项目

clone 项目下来

git clone https://github.com/touxing/miniprogram-webpack.git
D:\work\project\wxminiprogram-webpack-demo
├── babel.config.json         // babel 配置文件
├── gulpfile.mjs              // gulp 配置文件 用 gulp 处理图片
├── out.txt
├── package.json
├── plugin
|  ├── MinaRuntimePlugin.js   // 提出公共文件 runtime
|  └── MinaWepackPlugin.js    // 多入口插件
├── README.md
├── rename.js                 // 批量修改后文件缀名脚本
├── src                       // 小程序源码目录
|  ├── app.js
|  ├── app.json
|  ├── app.scss
|  ├── assets
|  |  └── styles
|  |     ├── mixins.scss
|  |     └── _share.scss
|  ├── pages
|  |  ├── index
|  |  |  ├── index.js
|  |  |  ├── index.json
|  |  |  ├── index.scss
|  |  |  └── index.wxml
|  |  └── logs
|  |     ├── logs.js
|  |     ├── logs.json
|  |     ├── logs.wxml
|  |     └── logs.wxss
|  ├── project.config.json       // 小程序项目配置文件
|  ├── sitemap.json
|  └── utils
|     └── util.js
├── webpack.config.js           // webpack 配置文件
└── yarn.lock

下载完结构目录。 新项目可以直接使用,在 src 目录下进行开发

迁移已有小程序项目

  1. 删掉 src 目录下的内容,把小程序项目 copy 到 src 目录下

  2. 可选配置

注意: 根据实际开发需要配置小程序跟目录 project.config.json

"miniprogramRoot": "./", // 配置小程序根路径
"cloudfunctionRoot": "dist/cloudfunctions/",  // 可选,如果是有云开发需求

运行

安装依赖,建议使用 yarn

yarn

运行,打开小程序开发者工具查看

yarn dev

打包

项目配置了根据不同环境打包到同一个目录,可自行根据业务区分处理

打包后,自动进行压缩图片到 dist

yarn build

单独执行图片压缩优化命令

yarn imagemin

production 环境对图片进行了缓存,需要清除开发缓存执行 gulp clear

创建模板

yarn run create

开发辅助

命令行调用

官方文档

cli 命令如果不是在开发者工具安装目录运行,需要把执行路径配置包环境变量中

cli --lang zh -h # 查看中文帮助

小程序命令行调用

  • 需要在微信开发者工具,开启服务端口
  • 需要全局安装 shelljs(用js写shell脚本的工具) 执行 npm i -g shelljs
yarn wxcli # 封装了交互指令

注意事项

现在很多常用的 loader 最新版基本都是适配 webpack5 的,实际使用过程中可能会遇到很多问题,需要不断解决。遇到 sass-loader 报错尝试降低版本。 建议不要修改 package.json 的安装版本,这里面的版本都是我踩过坑,在 webpack4 版本可以正常使用的。 遇到其他错误,建议 google

项目跑起来遇到问题:

  • 尝试换源,安装 nrm 切换源,很大概率是一些依赖安装不成功的问题
  • 安装依赖报错,提示 Python 找不到
    • 安装 Python 3.7 及以上版本,解决
  • 报错提示 node-gyp ERROR 相关错误
      1. 参考https://github.com/nodejs/node-gyp, 安装 node-gyp npm install -g node-gyp
      1. 重新安装依赖查看,是否成功
    • 2.1 如果成功,忽略 2.2,反之,执行 2.2 操作
    • 2.2 安装windows C++ 编译环境 npm install -g windows-build-tools 配置npm config set msvs_version 2017
  • 尝试重新安装依赖,或者换用 yarn 安装依赖。
  • yarn clean 删除dist目录,重新 run
    • 如果执行删除命令报错 rm 不是可执行,请手动删除 dist 目录

参考:https://blog.csdn.net/deflypig/article/details/107345507

TODO

  • 区分打包目录 dist/dev dist/prod dist/test
  • 新增模板cli命令
  • 升级 webpack5webpack5 分支
  • 开发者工具 真机调试 不了,报错 xxx does not exits
    • 原因: webpack 开启 minimizer 优化无用代码输出,历史项目有一些冗余代码,没有打包输出 js 文件, 输出目录中只有 .json .wxml .wxss 文件,导致 真机调试 时报错找不到相关的组件。
    • 解决:写一个插件 MinaPreviewPlugin 删除打包后导致报错的冗余文件

如果项目跑起来 npm run dev 后,打开dist目录下的小程序无法运行

安装微信开发者工具版本:Stable 1.05.2111300 用其他版本可能会有异常,无法运行项目,这是开发者工具的问题

小程序开发者工具运行有问题,尝试重启开发者工具或重新 npm run

鸣谢

感谢以下项目提供了参考帮助