详解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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
js实现购物车功能
Jun 12 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
微信小程序使用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
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
20条学习javascript的编程规范的建议
2014/11/28 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
pandas的qcut()方法详解
2019/07/06 Python
python各层级目录下import方法代码实例
2020/01/20 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
2014年项目工作总结
2014/11/24 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server