详解webpack编译多页面vue项目的配置问题
本文主要介绍了webpack编译多页面vue项目的配置问题，分享给大家，具体如下：
一般情况下，构建一个vue项目的步骤为：
1，安装nodejs环境
2，安装vue-cli
cnpminstallvue-cli-g
3，构建vue项目
vueinitwebpack-simplevue-cli-multipage-demo
4，安装项目依赖包
cnpminstall
5，在开发环境下运行该项目：
npmrundev
通过上面这几步一个简单的vue项目的开发环境基本就搭建起来，接下来的工作就是填代码了。
最近在做一个前端代码重构的时候发现一个问题，使用这个脚手架构建的项目满足不了我的需求，其实这个需求有一点违背我们vue的初衷的，vue开发的是单页面应用(SPA),这里我需要他实现多页面的效果。什么意思呢？举个例子：我们在网页开发的时候，有时候点击一个连接，浏览器会新代开一个tab页来显示我们的内容，这个时候其实就出现多页面的情况了，新开的这个页面其实已经不属于我们之前的那个页面，(SPA)其实是通过路由的方式，让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。
通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发，他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求，让webpack同时便于多个页面呢，其实还是比较简单的，只需要将webpack稍微改装一下，就完全可以了。
首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
utils.js
varglob=require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry=function(globPath){
varentries={},
basename,tmp,pathname;
if(typeof(globPath)!="object"){
globPath=[globPath]
}
globPath.forEach((itemPath)=>{
glob.sync(itemPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
if(entry.split('/').length>4){
tmp=entry.split('/').splice(-3);
pathname=tmp.splice(0,1)+'/'+basename;//正确输出js和html的路径
entries[pathname]=entry;
}else{
entries[basename]=entry;
}
});
});
returnentries;
}
然后修改wenpack.base.conf.js文件，修改入口文件，原来的文件是单文件，现在需要将单文件入口改成多文件入口了。
webpack.dev.conf.js
varpath=require('path')
varconfig=require('../config')
varutils=require('./utils')
varprojectRoot=path.resolve(__dirname,'../')
varglob=require('glob');
varentries=utils.getEntry(['./src/module/**/*.js']);//获得多页面的入口js文件
varenv=process.env.NODE_ENV
//variouspreprocessorloadersaddedtovue-loaderattheendofthisfile
varcssSourceMapDev=(env==='development'&&config.dev.cssSourceMap)
varcssSourceMapProd=(env==='production'&&config.build.productionSourceMap)
varuseCssSourceMap=cssSourceMapDev||cssSourceMapProd
module.exports={
entry:entries,//这是通过前面新增的方法获取的文件路径对象
output:{
path:config.build.assetsRoot,
publicPath:process.env.NODE_ENV==='production'?config.build.assetsPublicPath:config.dev.assetsPublicPath,
filename:'[name].js'
}
...
}
下面需要修改webpack.dev,conf.js文件了，这里主要是修改原来配置的首页,这里需要配置多个页面
webpack.dev.conf.js
varpath=require('path');
varconfig=require('../config')
varwebpack=require('webpack')
varmerge=require('webpack-merge')
varutils=require('./utils')
varbaseWebpackConfig=require('./webpack.base.conf')
varHtmlWebpackPlugin=require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function(name){
baseWebpackConfig.entry[name]=['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports=merge(baseWebpackConfig,{
...
});
//新增
varpages=utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for(varpathnameinpages){
//配置生成的html文件，定义路径等
varconf={
filename:pathname+'.html',
template:pages[pathname],//模板路径
inject:true,//js插入位置
chunksSortMode:'dependency'
};
if(pathnameinmodule.exports.entry){
conf.chunks=['manifest','vendor',pathname];
conf.hash=true;
}
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}
这里这要是改变了newHtmlWebpackPlugin的conf对象，原来的配置的是单个html,现在通过循环pages对象，生成多个html配置对象。
通过上面的配置，当我们执行npmrundev的时候，webpack就可以同时便于多个页面，然后将前面wenpack.base.conf.js中配置的js文件，插入到对应的html页面中。
这个时候我们运行项目npmrundev然后我们就可以访问不同的页面了，这里需要注意一下，既然我们需要管理多个页面，我们就应该在src下建立一个目录专门来访放不同的页面。这样项目结构看起来更加清晰，便于维护。
这是我写的一个demo地址，有兴趣的可以拉下来看看vue-cli-multi-page
运行起来后访问http://localhost:8080/module/index.html,然后点击按钮，打开新页面。
上面这样配置只是开发环境，最后生产环境的配置文件webpack.prod.conf.js也需要修改，这样在生产打包的时候就可以同时在dist中生成多个html文件。
webpack.prod.conf:
varpath=require('path')
varconfig=require('../config')
varutils=require('./utils')
varwebpack=require('webpack')
varmerge=require('webpack-merge')
varbaseWebpackConfig=require('./webpack.base.conf')
varExtractTextPlugin=require('extract-text-webpack-plugin')
varHtmlWebpackPlugin=require('html-webpack-plugin')
varCleanPlugin=require('clean-webpack-plugin')//webpack插件，用于清除目录文件
varenv=config.build.env
varwebpackConfig=merge(baseWebpackConfig,{
...
}
//这里是修改的部分，和webpack.dev.conf.js的修改是一样的
module.exports=webpackConfig
varpages=utils.getEntry(['./src/module/**/*.html']);
for(varpathnameinpages){
//配置生成的html文件，定义路径等
varconf={
filename:pathname+'.html',//生成html文件的文件名
template:pages[pathname],//根据自己的指定的模板文件来生成特定的html文件。这里的模板类型可以是任意你喜欢的模板，可以是html,jade,ejs,hbs,等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的loader，
inject:true,//注入选项。有四个选项值true,body,head,false.true:默认值，script标签位于html文件的body底部,body:同true,head:script标签位于head标签内,false:不插入生成的js文件，只是单纯的生成一个html文件
//necessarytoconsistentlyworkwithmultiplechunksviaCommonsChunkPlugin
chunksSortMode:'dependency'
};
if(pathnameinmodule.exports.entry){
conf.chunks=['manifest','vendor',pathname];
conf.hash=true;
}
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}
以上就是使用vue-cli脚手架来解决vue多页面开发的解决方案，希望对大家的学习有所帮助，也希望大家多多支持毛票票。