使用webpack打包原生小程序，并优化对小程序的一些功能点进行优化（小程序 webpack）

使用webpack打包原生小程序，并优化对小程序的一些功能点进行优化（小程序 webpack）

min-program-webpack

拓展

功能

支持引用 node_modules 模块支持通过配置 alias 来避免 ../../../ 之类的模块引用通过 babel 支持更丰富的 ES6 兼容，包括 async/await内置 promise 和 lodash（lodash 按需引入相应模块，不会全部引入）使用 less 编写 .wxss 文件

全局组件

auth-mask 封装了小程序的授权逻辑，防止用户拒绝授权时使用list-loader 和 lists-loader 负责列表渲染，时常见的组件owner-navigator 使用该组件才能出发 prevload 的生命周期

规范

页面\文件模块化，将入口页面放入 page/mian 文件夹下面，即扫码分享等让用户直接进入的页面，但最多不要超过 10 个页面。其他页面按模块分，如商品模块 page/product、订单模块 page/order。由于小程序的一个页面是 由 4 个文件组成，所以建议用文件夹将其包含起来，如首页可以是 page/mian/home/index。模块化除了方便管理文件，更重要的是分包加载，可以大幅提高首次进入的速度。小程序中多处使用的常量请放到统一的 constant 文件中，多处使用的函数放到 app_action 中（和业务相关），多处使用的工具类请 util 中（单纯的只是工具）。

其他

使用 wxs 作为过滤器可以使业务逻辑解耦，有利于代码维护，提供了一个 demo 用于处理将图片域名转化为 cdn 域名在根目录有 component 和 page 的 template 文件，新建页面的时候复制粘贴过去就行了。该项目参考 https://github.com/Cap32/wxapp-webpack-plugin， 该项目地址 https://github.com/XLinzexin/min-program-webpack

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。