评论

使用 webpack 打包小程序

webpack打包小程序

  1. 前言

  • 针对目前市面上出现的各种小程序,如百度小程序,支付宝小程序,字节跳动小程序,快手小程序。
    小程序原生开发对于开发者的开发体验并不是很友好,那如何解决这个问题呢?
  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

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

最后一次编辑于  04-28  
点赞 3
收藏
评论
登录 后发表内容