webpack打包文件不能引用_使用 webpack 打包小程序

本文探讨了在小程序原生开发遇到的不便,提出通过webpack解决样式预处理、TypeScript支持、多环境打包等问题。详细介绍了如何配置webpack,包括确定入口文件、编译模板、处理样式、处理配置和移除不必要的文件,以实现更高效的小程序开发流程。
摘要由CSDN通过智能技术生成

前言

针对目前市面上出现的各种小程序,如百度小程序,支付宝小程序,字节跳动小程序,快手小程序。

小程序原生开发对于开发者的开发体验并不是很友好,那如何解决这个问题呢?

问题点

样式预处理

TypeScript支持

多环境打包支持

可扩展性 如在小程序内支持md文档格式,json格式等

多端支持

问题如何解决

使用webpack 来处理以上一系列问题

webpack 官方介绍就是静态文件的打包器

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

回顾小程序

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

脚本逻辑

配置

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

脚本逻辑

模版

样式

配置

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

确定入口文件

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

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

编译模版

问题点:webpack 无法直接去编译小程序的wxml文件

如何解决:可以自定义一个loader去解析这些文件,让webpack能够识别到。

通常导出⼀一个函数,⼊入参为上⼀一个 loader 的返回值,可以有多个⼊入参,通常为源码

返回值⼀一般为处理理后的代码,如要返回多个值,⽤用 this.callback()

使⽤用 loader-utils 来辅助处理理,例例如通过 loader-utils 获取 loader 传⼊入 options,⼀个 loader 只处理理单一事务

处理样式

可以使用如下loader编译小程序样式

saas-loader/less-loader -> postcss-loader -> css-loader -> filer-loader

处理配置

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

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

移除不必要的文件

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

Compiler 负责⽂文件监听和启动编译,包含完整 webpack 配置,全局唯⼀

compiler.hooks.* entryOption run watchRun compilation

Compilation 第⼀次以及监听到⽂文件变化创建,包含当前模块信息、编译⽣生成资源等信息

compilation.hooks.* buildModule optimize beforeChunkAssets optimizeChunkAssets

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值