关于uni-build打包小程序的源码分析
我们使用uni-app的脚手架开发微信小程序其实已经比较方便。但是uni-app框架是怎么实现将vue项目打包成微信小程序项目，很少有人关注。关于uni-build打包小程序的源码分析。底层还是使用的webpack打包框架，uni-app实现了自己的一套算法。针对小程序所要求的文件结构，将VUE项目转换成微信小程序可识别的项目结构。看了一下源码，不是很好读，我接下来主要把找到的编译入口方法展示给大家看下，有需要的朋友可以顺着入口往里解读。前言 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： https://img2020.cnblogs.com/blog/465907/202008/465907-20200827114818996-609685808.png一个小程序页面由四个文件组成，分别是：
https://img2020.cnblogs.com/blog/465907/202008/465907-20200827114836269-335586717.png
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html一、打包实现在依赖包vue-cli-plugin-uni中，入口看build.js文件https://img2020.cnblogs.com/blog/465907/202008/465907-20200827113107078-1939815944.png uni-build打包的build源码https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif View Code
二、打包微信小程序的代码入口地址https://img2020.cnblogs.com/blog/465907/202008/465907-20200827113648933-1954480817.png mp的入口文件index.js中定义了微信小程序打包的相关配置https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif View Code
三、运行打包前所捕获到的 webpackConfigs 相关参数https://common.cnblogs.com/images/copycode.gif
[ { mode: 'production', context: 'D:\\02code\\app-wechat-supply', devtool: false, node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, output: { path: 'D:\\02code\\app-wechat-supply\\dist\\mit', filename: '.js', publicPath: '/', chunkFilename: '.js', globalObject: 'global' }, resolve: { alias: , extensions: , modules: , plugins: }, resolveLoader: { modules: , plugins: }, module: { noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/, rules: }, optimization: { splitChunks: , minimizer: , noEmitOnErrors: false, runtimeChunk: , namedModules: false }, plugins: [ VueLoaderPlugin {}, , , , , , , , , , , WebpackUniAppPlugin {}, WebpackUniMPPlugin {}, , ], entry: , performance: { assetFilter: , hints: false } } ]https://common.cnblogs.com/images/copycode.gif
四、小程序打包后的项目结构https://img2020.cnblogs.com/blog/465907/202008/465907-20200827114207308-423376808.png 参考资料：https://uniapp.dcloud.io/https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000668c6910b784b00860870a5ac0ahttps://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
每天都是崭新的开始 ——Mr.司满（214382122）[]~(￣▽￣)~*
分类: vue
页:
[1]