vue+webpack配置多html文件

前言

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

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

配置

创建项目 vue init webpack 项目名 添加多页面帮助工具：这是封装的各种多页面支持的方法，命名为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) } } 修改webpack.base.conf.js：配置多个页面的js入口 //**添加** //引入多页面支持 var multipageHelper = require('./multipage-helper') //**修改** module.exports = { entry: multipageHelper.getEntries(), //设置入口集合 ... } 修改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()) 修改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())

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

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

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

打包后的目录 gitHub地址

如有问题，欢迎指正！