社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
使用分包解决微信上传2M的限制
1.依赖升级新增 升级本地的mpvue-loader到1.1.0-rc.1,webpack-mpvue-asset-plugin到0.1.0-rc.1,新增依赖relative(后面会使用
2. 打包更改配置 具体参考https://github.com/mpvue/mpvue-quickstart/pull/39/files,严格按照这个文档来更改,
3.使用依赖relative,处理win和mac系统下面文件读取路径问题,处理方式
//webpack.base.conf.js
var relative = require('relative');
function getEntry(rootSrc) {
var map = {};
//fileArray 自定义打包入口分包,根据项目的使用分包情况配置fileArray值
var fileArray = ['pages', 'subOrder/pages', 'groups', 'subSeckill', 'bargain', 'subRefund', 'subCoupon'];
fileArray.map(name => {
glob.sync(rootSrc + `/${name}/**/main.js`).forEach(file => {
var key = relative(rootSrc, file).replace('.js', '');
map[key] = file;
});
glob.sync(rootSrc + `/${name}/**/main.json`).forEach(file => {
configFilesArray.push({
from: file,
to: relative(rootSrc, file)
});
});
});
return map;
}
4.配置新增的src/main.json文件
打包生成的app.json文件内容会根据src/main.json内容生成,而不是mpvue自动生成app.json页面路径,下图所示pages和subPackages都需要单独配置不是自动生成。配置时候注意点 1、目录结构和subPackages是有对应关系的,严格按照对应关系去设置子包的路径2、pages里面的页面路劲不能和subPackages重复3、分包子包文件都在pages下面,不是和pages平级的
5、设置src/mian.json后应该在webpack.base.config.js中配置对应的入口文件值fileArray,上图所示我的subPackages下面两个root分别为pages/hotel/和pages/scenic/(***左斜杠不能删除)***,那fileArray的值应该添加pages/hotel和pages/scenic,下面是我本地对应上面mian.json的设置,
6.运行 npm run dev ,dev详情如下图,说明分包成功!
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!