vue+webpack支持多页面打包

      开始上手vue，用vue-cli脚手架搭建的环境只支持单页面打包，每一次开发新的页面都需要重新搭建一套新的脚手架，很麻烦。所以决定改配置，支持多页面打包。也支持多文件夹嵌套打包。

  上图是大致的项目结构。src/common 存放一些公共的资源，src/view 存放页面，每一个页面分别存放在一个文件夹下，支持路由。

1. 修改 build/util.js，新增暴露几个新接口，分别去获取不同页面的入口文件，和复制打包好的资源文件到相应目录。

//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-4);

    var pathsrc = tmp[0]+'/'+tmp[1];
    if( tmp[0] == 'src' ){
      pathsrc = tmp[1];
    }
    //console.log(pathsrc)
    pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;

    //console.log(pathname+'-----------'+entry);

  });

  return entries;

}


var fs = require( 'fs' ),
  copyStat = fs.stat;

/*
 * 复制目录中的所有文件包括子目录
 * @param{ String } 需要复制的目录
 * @param{ String } 复制到指定的目录
 */
var filecopy = function( src, dst ){
  // 读取目录中的所有文件/目录
  fs.readdir( src, function( err, paths ){
    if( err ){
      throw err;
    }
    paths.forEach(function( path ){
      var _src = src + '/' + path,
        _dst = dst + '/' + path,
        readable, writable;
      copyStat( _src, function( err, st ){
        if( err ){
          throw err;
        }
        // 判断是否为文件
        if( st.isFile() ){
          // 创建读取流
          readable = fs.createReadStream( _src );
          // 创建写入流
          writable = fs.createWriteStream( _dst );
          // 通过管道来传输流
          readable.pipe( writable );
        }
        // 如果是目录则递归调用自身
        else if( st.isDirectory() ){
          exports.startCopy( _src, _dst );
        }
      });
    });
  });
};

2. 在webpack.base.conf.js中引用，获取多级入口。

var entries =  utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.js'); // 获得入口js文件

3. 在build/build.js 中复制编译好的资源文件夹到相应目录，解决多个文件夹嵌套打包后找不到资源文件的问题。

/* 拼接编译输出文件路径 */
    var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
    /* 复制 static 文件夹到我们的编译输出目录 */
    // cp('-R', assetsPath, assetsPath2)
    glob.sync('./src/'+config.moduleName+'/**/**/*.js').forEach(function (entry) {
      var tmp = entry.split('/').splice(-4);

      var pathsrc = tmp[0]+'/'+tmp[1];``
      if(tmp[0] == 'src') {
        pathsrc = tmp[1];
        pathsrc = path.join(config.build.assetsRoot, pathsrc)
        cp('-R', assetsPath, pathsrc)
      } else if(tmp[0] == 'view') {
        pathsrc = path.join(config.build.assetsRoot, pathsrc)
        // cp('-R', assetsPath, pathsrc)
      }
    });

最后，打包出来的结果如下图。

我上传了demo到CSDN，有兴趣的可以去下载，有bug请及时联系。

demo下载