关于uni-build打包小程序的源码分析

　　我们使用uni-app的脚手架开发微信小程序其实已经比较方便。但是uni-app框架是怎么实现将vue项目打包成微信小程序项目，很少有人关注。关于uni-build打包小程序的源码分析。底层还是使用的webpack打包框架，uni-app实现了自己的一套算法。针对小程序所要求的文件结构，将VUE项目转换成微信小程序可识别的项目结构。看了一下源码，不是很好读，我接下来主要把找到的编译入口方法展示给大家看下，有需要的朋友可以顺着入口往里解读。

前言

　　小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

　　一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

　　
　　一个小程序页面由四个文件组成，分别是：

　　注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

一、打包实现在依赖包vue-cli-plugin-uni中，入口看build.js文件

uni-build打包的build源码

View Code

二、打包微信小程序的代码入口地址

mp的入口文件index.js中定义了微信小程序打包的相关配置

View Code

三、运行打包前所捕获到的 webpackConfigs 相关参数

[url=][/url]
[ { 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: '[name].js',       publicPath: '/',       chunkFilename: '[id].js',       globalObject: 'global' },    resolve:     { alias: [Object],       extensions: [Array],       modules: [Array],       plugins: [Array] },    resolveLoader: { modules: [Array], plugins: [Array] },    module:     { noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,       rules: [Array] },    optimization:     { splitChunks: [Object],       minimizer: [Array],       noEmitOnErrors: false,       runtimeChunk: [Object],       namedModules: false },    plugins:     [ VueLoaderPlugin {},       [DefinePlugin],       [CaseSensitivePathsPlugin],       [FriendlyErrorsWebpackPlugin],       [MiniCssExtractPlugin],       [OptimizeCssnanoPlugin],       [HashedModuleIdsPlugin],       [NamedChunksPlugin],       [DefinePlugin],       [CopyPlugin],       [CopyPlugin],       WebpackUniAppPlugin {},       WebpackUniMPPlugin {},       [ProvidePlugin],       [CopyPlugin] ],    entry: [Function: entry],    performance: { assetFilter: [Function: assetFilter], hints: false } } ][url=][/url]

四、小程序打包后的项目结构

参考资料：

https://uniapp.dcloud.io/

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000668c6910b784b00860870a5ac0a

https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

每天都是崭新的开始 ——Mr.司满（214382122）[]~(￣▽￣)~*

分类: vue