背景：vue-cli版本3.0  

省略初始化專案；預設的App.vue和index.html檔案可以刪掉

頁面結構如上圖，新加的home可以不要，注意下面的檔案路徑就行

接下來修改配置檔案：

1、修改build/utils.js

/* 這裡是新增的部分 ---------------------------- 開始 */

// glob是webpack安裝時依賴的一個第三方模組，還模組允許你使用 *等符號, 例如lib/*.js就是獲取lib資料夾下的所有js字尾名的檔案
const glob = require('glob')
// 頁面模板
//獲取多級的入口檔案
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 );
        }
      });
    });
  });
};

//在複製目錄前需要判斷該目錄是否存在，不存在需要先建立目錄
exports.startCopy = function( src, dst ){
  fs.exists( dst, function( exists ){
    // 已存在
    if( exists ){
      filecopy( src, dst );
    }
    // 不存在
    else{
      fs.mkdir( dst, function(){
        filecopy( src, dst );
      });
    }
  });
};
/* 這裡是新增的部分 ---------------------------- 結束 */
 

2、修改build/webpack.base.conf.js 入口配置

注意：獲取入口js檔案時，utils.getMultiEntry('./src/views/**/**/*.js');這裡的路徑要按實際路徑配置，我的頁面包了一層home，所以這裡這麼寫

3、修改build/webpack.dev.conf.js

原本的plugins配置：

需要去掉紅框的部分，重寫HtmlWebpackPlugin外掛

let pages =  utils.getMultiEntry('./src/views/**/**/*.html');
for (let pathname in pages) {
  // 配置生成的html檔案，定義路徑等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路徑
    chunks: [pathname, 'vendors', 'manifest'], // 每個html引用的js模組
    inject: true              // js插入位置
  };
  // 需要生成幾個html檔案，就配置幾個HtmlWebpackPlugin物件
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
 

4、修改build/webpack.pro.conf.js 同上

至此修改完成。

主要思路就是把webpack的單入口檔案改成多入口檔案。

1：使用glop和fs模組獲取多級入口檔案

2：迴圈生成多個HtmlWebpackPlugin物件，從而生成多個html入口檔案