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下載