使用 webpack 打包小程序
发布于 5 年前 作者 nzhu 4770 次浏览 来自 分享 
### 前言
  • 针对目前市面上出现的各种小程序，如百度小程序，支付宝小程序，字节跳动小程序，快手小程序。
    小程序原生开发对于开发者的开发体验并不是很友好，那如何解决这个问题呢？

  1. 问题点

  • 样式预处理
  • TypeScript支持
  • 多环境打包支持
  • 可扩展性 如在小程序内支持md文档格式，json格式等
  • 多端支持

  1. 问题如何解决

  • 使用webpack 来处理以上一系列问题
  • webpack 官方介绍就是静态文件的打包器

上图所做的工作就是 项目中所有的静态文件 如js wxss wxml png jpg 通过webpack处理，可以输出到特定环境下可以运行的代码，webpack就是导入一些入口文件然后通过编译输出结果

  1. 回顾小程序

首先小程序由项目入口组成

  • 脚本逻辑
  • 配置

其次小程序也由页面/组件 组成

  • 脚本逻辑
  • 模版
  • 样式
  • 配置

因为小程序的项目中每个文件都是独立的，比如小程序一个页面由js,json,wxml.wxss组件,而不是像web一样可以将文件打包在一起，这样我们使用webpack打包小程序就有一定的限制条件，既然输出的结果一定要按照小程序的规范，那么入口文件也要根据要求去操作，可能webpack 配置就不是一个单页面的配置，就要考虑使用多入口的方式实现，那么就要解决如下问题点：

  1. 确定入口文件
    在小程序的app.json中会有一个pages 里面都是小程序中所有的页面，那么我们可以通过一个方法getPages获取这些页面的所有内容如js,json,wxss,wxml等信息，但是有个问题就是因为页面中可能包含有很多组件部分，所以还需要去解析页面组件的依赖，可以通过页面json中 usingComponents 配置去解析

如图所示，页面有很多组件组成，我们可以通过一个方法getComponents方式，用递归的方式获取到项目页面中所有的组件信息，包含组件模版，样式

  1. 编译模版

问题点：webpack 无法直接去编译小程序的wxml文件
如何解决：可以自定义一个loader去解析这些文件，让webpack能够识别到。

通常导出⼀一个函数，⼊入参为上⼀一个 loader 的返回值，可以有多个⼊入参，通常为源码
返回值⼀一般为处理理后的代码，如要返回多个值，⽤用 this.callback()
使⽤用 loader-utils 来辅助处理理，例例如通过 loader-utils 获取 loader 传⼊入 options,⼀个 loader 只处理理单一事务

  1. 处理样式
    可以使用如下loader编译小程序样式
    saas-loader/less-loader -> postcss-loader -> css-loader -> filer-loader

  2. 处理配置
    考虑一个问题，小程序的配置文件是一个json文件，我们是否可以通过webpack的file-loader去编译

上图中的确可以处理我们页面的配置文件，但是有个问题就是如果页面文件夹中出现另一个json文件，比如是一些静态数据的json文件，我们知道小程序是不能从本地引用本地文件，所以必须要通过一个loader去做这些事

  1. 移除不必要的文件

    通过file-loader 打包之后会出现以下红色框的文件，但是我们小程序是不需要这些文件的，那么如何移除呢？我们知道webpack的编译过程是

Compiler 负责⽂文件监听和启动编译，包含完整 webpack 配置，全局唯⼀
compiler.hooks.* entryOption run watchRun compilation

Compilation 第⼀次以及监听到⽂文件变化创建，包含当前模块信息、编译⽣生成资源等信息
compilation.hooks.* buildModule optimize beforeChunkAssets optimizeChunkAssets

编译结果输出还不是很优雅还需要完善，后续要通过抽离公共代码，封装一些插件优化。。。

回到顶部