vue+webpack配置多html文件

前言

前两天在使用vue+webpack做移动端项目时，公司负责人要求打包项目时，可以生成多个html页面，话不多说进入正题。

前提条件：你已熟悉vue-cli

配置

1. 创建项目

    vue init webpack 项目名

1. 添加多页面帮助工具：这是封装的各种多页面支持的方法，命名为multipage-helper.js，放在项目的build文件夹下

   	var path = require('path')
   	var fs = require("fs")
   	var HtmlWebpackPlugin = require('html-webpack-plugin')
   	var moduleList          //缓存多页面模块列表
   	var moduleRootPath = './src/module' //模块根目录(这个可以根据自己的需求命名)
   	/**
   	 * 获取js入口数组
   	 */
   	exports.getEntries = function getEntries(){
   	  var entries = {} //缓存js入口数组
   	  this.getModuleList()  //初始化模块列表
   	  moduleList.forEach(function (module) {  //变量模块列表
   	    if (module.moduleID != "" && module.moduleJS != ""){
   	      entries[module.moduleID] = module.moduleJS
   	    }
   	  })
   	  return entries
   	}
   	/**
   	 * 获取多页面模块列表
   	 * @returns {模块的信息集合}
   	 */
   	exports.getModuleList = function getModuleList() {
   	  if (moduleList){  //判断是否为空，不为空则直接返回
   	    return moduleList
   	  }else {//为空则读取列表
   	    moduleList = new Array();
   	    readDirSync(moduleRootPath, "")
   	    return moduleList
   	  }
   	}
   	/**
   	 * 获取dev的Html模板集合
   	 * @returns {dev的Html模板集合}
   	 */
   	exports.getDevHtmlWebpackPluginList = function getDevHtmlWebpackPluginList(){
   	  var devHtmlWebpackPluginList = [] //缓存dev的Html模板集合
   	  var moduleList = this.getModuleList()   //获取多页面模块集合
   	  moduleList.forEach(function (mod) { //遍历生成模块的HTML模板
   	    var conf = {  //生成配置
   	      filename: mod.moduleID+".html",
   	      template: mod.moduleHTML,
   	      chunks: [mod.moduleID],
   	      inject: true
   	    }
   	    devHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))   //添加HtmlWebpackPlugin对象
   	  })
   	  return devHtmlWebpackPluginList
   	}
   	/**
   	 * 获取prod的Html模板集合
   	 * @returns {prod的Html模板集合}
   	 */
   	exports.getProdHtmlWebpackPluginList = function getProdHtmlWebpackPluginList(){
   	  var prodHtmlWebpackPluginList = [] //缓存dev的Html模板集合
   	  var moduleList = this.getModuleList()  //获取多页面模块集合
   	  moduleList.forEach(function (mod) { //遍历生成模块的HTML模板
   	    var conf = {  //生成配置
   	      filename: mod.moduleID+".html",
   	      template: mod.moduleHTML,
   	      inject: true,
   	      minify: {
   	        removeComments: true,
   	        collapseWhitespace: true,
   	        removeAttributeQuotes: true
   	      },
   	      chunksSortMode: 'dependency',
   	      chunks: ['manifest','vendor',mod.moduleID]
   	    }
   	    prodHtmlWebpackPluginList.push(new HtmlWebpackPlugin(conf))    //添加HtmlWebpackPlugin对象
   	  })
   	  return prodHtmlWebpackPluginList
   	}
   	/**
   	 * 深度遍历目录，并整理多页面模块
   	 * @param path 需要变量的路径
   	 * @param moduleName 模块名称
   	 */
   	function readDirSync(path,moduleName){
   	  var module = {moduleID:"",moduleHTML:"",moduleJS:""}  //缓存模块对象
   	  var moduleID = path.replace(moduleRootPath+"/","") //获取当前模块ID
   	  if (path == moduleRootPath){
   	    moduleID = ""
   	  }
   	  module.moduleID = moduleID
   	  var pa = fs.readdirSync(path)  //获取目录下所有文件及文件夹
   	  pa.forEach(function(ele,index){
   	    var info = fs.statSync(path+"/"+ele)
   	    if(info.isDirectory()){
   	      // console.log("dir: "+ele)
   	      readDirSync(path+"/"+ele, ele)
   	    }else{
   	      if (moduleName+".html" == ele){   //判断当前模块的html是否存在
   	        module.moduleHTML = path+"/"+ele
   	      }
   	      if (moduleName+".js" == ele){    //判断当前模块的js是否存在
   	        module.moduleJS = path+"/"+ele
   	      }
   	    }
   	  })
   	  //判断模块是否真实(可能只是个分级目录)
   	  if ((module.moduleID != "" && module.moduleHTML != "") || (module.moduleID != "" && module.moduleJS != "")){
   	    moduleList.push(module)
   	  }
   	}

2. 修改webpack.base.conf.js：配置多个页面的js入口

   //**添加**
	//引入多页面支持
	var multipageHelper = require('./multipage-helper')
	
	//**修改**
	module.exports = {
	  entry: multipageHelper.getEntries(), //设置入口集合
	  ...
	}

3. 修改webpack.dev.conf.js：开发时的多页面模板配置

   	  //**添加**
   	//引入多页面支持
   	var multipageHelper = require('./multipage-helper')
   	
   	//**删除**
   	//删除module.exports中原有的HtmlWebpackPlugin配置(内容可能不一样，反正HtmlWebpackPlugin就对了)
   	new HtmlWebpackPlugin({
   	filename: 'index.html',
   	template: 'index.html',
   	inject: true
   	})
   	
   	//**末尾添加**
   	//添加Html模板集合
   	Array.prototype.push.apply(module.exports.plugins,multipageHelper.getDevHtmlWebpackPluginList())

4. 修改webpack.prod.conf.js：编译时的多页面模板配置

   	 //**添加**
   	//引入多页面支持
   	var multipageHelper = require('./multipage-helper')
   	
   	//**删除**
   	//删除webpackConfig中原有的HtmlWebpackPlugin配置(内容可能不一样，反正HtmlWebpackPlugin就对了)
   	new HtmlWebpackPlugin({
   	  filename: config.build.index,
   	  template: 'index.html',
   	  inject: true,
   	  minify: {
   	    removeComments: true,
   	    collapseWhitespace: true,
   	    removeAttributeQuotes: true
   	    // more options:
   	    // https://github.com/kangax/html-minifier#options-quick-reference
   	  },
   	  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   	  chunksSortMode: 'dependency'
   	})
   	
   	//**末尾添加**
   	//添加Html模板集合
   	Array.prototype.push.apply(module.exports.plugins,multipageHelper.getProdHtmlWebpackPluginList())

5. 目录结构及其使用：目录结构有点讲究，一看就懂
   
   用userManage来举例

   • userManage.js：vue的入口文件(以前的main.js)
   • userManage.html ：这就是一个Html页面(以前的index.html)
   • userManage.vue：vue的视图文件(以前的App.vue)

   需要注意的是：上面三个文件名需要和文件夹名字相同

6. 打包后的目录
   
   gitHub地址

如有问题，欢迎指正！