Vue2-多入口配置

能點進來的，確定是對單入口瞭解透徹，對Vue2瞭解的人了。
話很少說。上乾貨。

前期準備

1.一個完成能運行的Vue單頁項目.(本文以Vue提供的單頁模板爲例子)
2.若沒有，請找度娘。

目錄

個人src目錄有修改，以下：

本例要修改的配置文件以下：

config/index.js修改

修改以下：

代碼以下：
在config/index.js中添加兩個字段。
view:是方全部頁面的文件夾名稱
defaultEntry：存有兩個屬性，是主頁面的html和js的路徑（個人主頁js入口和html不在同一個文件夾下，這裏配一下）

//多入口配置
  entryPath:['view'],    
  defaultEntry:{
    html:'index',
    js:'./src/index'
  },

utils.js修改

修改以下：

代碼以下：

//獲取多級入口
let glob = require('glob')
exports.getMultiEntry = function (globPath,type) {
  let entries = {}, basename, tmp, pathname;
  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-4);
    let pathSrc=tmp[0]+'/'+tmp[1]
    if(tmp[0]==='src'){
      pathSrc=tmp[2]
    }
    pathname = pathSrc+'/'+basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });
  if(config.defaultEntry&&config.defaultEntry!==''){
    entries['index']=config.defaultEntry[type]+'.'+type
  }
  console.log('entries-----------', entries);
  return entries;
}

webpack.base.conf.js修改

以下：

代碼：

//多入口配置添加
let entries={}
for(let i=0;i<config.entryPath.length;i++){
  let tempEntry= utils.getMultiEntry('./src/'+config.entryPath[i]+'/**/*.js','js'); // 得到入口js文件
  entries=Object.assign(entries,tempEntry)
}
const chunks = Object.keys(entries)

webpack.dev.conf.js

以下：

代碼：

//多入口配置添加
let htmlPages = {}
for (let i = 0; i < config.entryPath.length; i++) {
  let tempHtml = utils.getMultiEntry('./src/' + config.entryPath[i] + '/**/*.html', 'html') // 得到入口js文件
  htmlPages = Object.assign(htmlPages, tempHtml);
}
let pagesConfig = []
for (let pagename in htmlPages) {
  const pageCon = {
    filename: pagename+'.html',
    template: htmlPages[pagename],
    chunks: [pagename, 'vendors', 'manifest'], // 每一個html引用的js模塊, 由此看出html和js名字要相同
    inject: true
  }
  pagesConfig.push(new HtmlWebpackPlugin(pageCon))
}

注意，別忘了隱藏源文件的new HtmlWebpackPlugin一段代碼。
在plugins數組後面接上一句：.concat(pagesConfig)

webpack.prod.conf.js修改

修改以下：

代碼：

//多入口配置添加
let htmlPages = {}
for (let i = 0; i < config.entryPath.length; i++) {
  let tempHtml = utils.getMultiEntry('./src/' + config.entryPath[i] + '/**/*.html', 'html') // 得到入口html文件
  htmlPages = Object.assign(htmlPages, tempHtml);
}
console.log(htmlPages)
for (let pagename in htmlPages) {
  const pageCon = {
    filename: pagename +'.html',
    template: htmlPages[pagename],// 模板路徑
    inject: true,// js插入位置
    chunks: ["vendor", "manifest",pagename],// 每一個html引用的js模塊，也能夠在這裏加上vendor等公用模塊
    chunksSortMode: 'dependency',
    hash:true
  }
  console.log(pageCon)
  webpackConfig.plugins.push(new HtmlWebpackPlugin(pageCon))
}

別忘了隱藏這段代碼：

好啦完成了

npm run build
npm run dev
進入瀏覽器打開地址
http://localhost:8080/first (first頁面)
http://localhost:8080/first/#/login (first頁面子路由1)
http://localhost:8080/first/#/regist (first頁面子路由2)
http://localhost:8080/second (second頁面)

http://localhost:8080/ (主頁)