mpvue开发微信小程序分包配置

---

mpvue2.0上线了，自带分包，下文章失去意义了。。

---

使用分包解决微信上传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详情如下图，说明分包成功！