详解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多页面开发的解决方案,希望对大家的学习有所帮助,也希望大家多多支持毛票票。