详解webpack编译多页面vue项目的配置问题


Posted in Javascript onDecember 11, 2017

 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下:

一般情况下,构建一个vue项目的步骤为:

1,安装nodejs环境

2,安装vue-cli

cnpm install vue-cli -g

3,构建vue项目

vue init webpack-simple vue-cli-multipage-demo

4, 安装项目依赖包

cnpm install

5,在开发环境下运行该项目:

npm run dev

通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,接下来的工作就是填代码了。

最近在做一个前端代码重构的时候发现一个问题,使用这个脚手架构建的项目满足不了我的需求,其实这个需求有一点违背我们vue的初衷的,vue开发的是单页面应用(SPA),这里我需要他实现多页面的效果。什么意思呢?举个例子:我们在网页开发的时候,有时候点击一个连接,浏览器会新代开一个tab页来显示我们的内容,这个时候其实就出现多页面的情况了,新开的这个页面其实已经不属于我们之前的那个页面,(SPA)其实是通过路由的方式,让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。

通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发,他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求,让webpack同时便于多个页面呢,其实还是比较简单的,只需要将webpack稍微改装一下,就完全可以了。

首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
 var entries = {},
 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;
  }
 });
 });
 return entries;
}

然后修改wenpack.base.conf.js文件,修改入口文件,原来的文件是单文件,现在需要将单文件入口改成多文件入口了。

webpack.dev.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = 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

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = 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, {
 ...
});
//新增
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 inject: true,    // js插入位置
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

这里这要是改变了new HtmlWebpackPlugin的conf对象,原来的配置的是单个html,现在通过循环pages对象,生成多个html配置对象。

通过上面的配置,当我们执行npm run dev 的时候,webpack就可以同时便于多个页面,然后将前面wenpack.base.conf.js中配置的js文件,插入到对应的html页面中。

这个时候我们运行项目npm run dev 然后我们就可以访问不同的页面了,这里需要注意一下,既然我们需要管理多个页面,我们就应该在src下建立一个目录专门来访放不同的页面。这样项目结构看起来更加清晰,便于维护。

这是我写的一个demo地址,有兴趣的可以拉下来看看vue-cli-multi-page

运行起来后访问http://localhost:8080/module/index.html,然后点击按钮,打开新页面。

上面这样配置只是开发环境,最后生产环境的配置文件webpack.prod.conf.js也需要修改,这样在生产打包的时候就可以同时在dist中生成多个html文件。

webpack.prod.conf:

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack插件,用于清除目录文件
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//这里是修改的部分,和webpack.dev.conf.js的修改是一样的
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件,定义路径等
 var conf = {
 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 文件
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

以上就是使用vue-cli脚手架来解决vue多页面开发的解决方案,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 #Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 #Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 #Javascript
Mac中安装nvm的教程分享
Dec 11 #Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
基于dataset的使用和图片延时加载的实现方法
Dec 11 #Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php foreach、while性能比较
2009/10/15 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
基于javascript的拖拽类封装详解
2019/04/19 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
如何基于python实现归一化处理
2020/01/20 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
技校毕业生自荐信范文
2014/03/07 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
无房证明样本
2015/06/17 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js