一、建立專案

vue init webpack ma

二、修改build資料夾下的utils.js

1、 引入glob外掛

程式碼：var glob = require('glob')
2、 在utils.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;

}

三、修改build資料夾下的webpack.base.conf.js

刪除這段程式碼entry: {app: './src/main.js'},，更換為以下程式碼

    module.exports = {
    ···
    entry: utils.getMultiEntry('./src/views/**/*.js'),
    ···
    }

四、修改build資料夾下的webpack.dev.conf.js

1、將下面的程式碼註釋掉：

更換為如下程式碼：

    new webpack.optimize
 
.CommonsChunkPlugin({
      name: 'vendor',
      chunks: chunks,
      minChunks: 4 || chunks.length 
    }),

2、在檔案底部加入這段程式碼：

  var pages =utils.getMultiEntry('./src/views/**/*.html')
  for(var page in pages) {
    // 配置生成的html檔案，定義路徑等
    var conf = {
      filename: page + '.html',
      template: pages[page], //模板路徑
      inject: true,
      // excludeChunks 允許跳過某些chunks, 而chunks告訴外掛要引用entry裡面的哪幾個入口
      // 如何更好的理解這塊呢？舉個例子：比如本demo中包含兩個模組（index和about），最好的當然是各個模組引入自己所需的js，
      // 而不是每個頁面都引入所有的js，你可以把下面這個excludeChunks去掉，然後npm run build，然後看編譯出來的index.html和about.html就知道了
      // filter：將資料過濾，然後返回符合要求的資料，Object.keys是獲取JSON物件中的每個key
      excludeChunks: Object.keys(pages).filter(item => {
        return (item != page)
      })
    }
    console.log(page);
    // 需要生成幾個html檔案，就配置幾個HtmlWebpackPlugin物件
    module.exports.plugins.push(new HtmlWebpackPlugin(conf))
  }

五、修改build資料夾下的webpack.prod.conf.js

1、加入這段程式碼：

程式碼如下：

var entries =  utils.getMultiEntry('./src/'+'views'+'/**/**/*.js'); // 獲得入口js檔案
var chunks = Object.keys(entries);

2、將這段程式碼註釋掉：

3、將這段程式碼註釋掉：

4、在檔案底部加入這段程式碼：

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

六、修改config資料夾中的index.js

最後，如果你對vuejs感興趣可以加入該群，我們大家一塊交流學習：