electron-vue利用webpack打包实现多页面的入口文件问题


Posted in Javascript onMay 12, 2019

项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。

1、webpack的核心概念

•Entry:入口,Webpack执行构建的第一步从Entry开始;
•Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
•Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割。
•Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
•Plugin:扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
•Output:输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。

2、配置多页面的入口文件

electron构建后的项目目录如下:

•创建新的页面

vue-cli生成的项目中只有一个main.js主入口的js文件来处理所有的vue页面,我们创建多个页面需要生成一个这个页面相对应的js文件,保存该页面中包含的内容。

•配置多页面的入口文件

electron-vue创建的项目中有三个webpack的配置,我主要是在webpack.renderer.config中配置多个入口,生成多页面的入口文件,代码如下:

webpack中的HtmlWebpackPlugin插件是用来简单创建HTML文件,用于服务器访问。必须在新建HtmlWebpackPlugin中写chunks,不然无法识别,页面加载不出来

•electron中新建窗口,访问新生成的页面

electron中src的main文件中的index.js为主进程,在该页面中新建窗口,调用新生成的HTML文件,代码如下:

const dialpadUrl = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/dialpad.html`
 : `file://${__dirname}/dialpad.html`

创建新窗口打开页面的地址。electron的win.loadURL(url[, options])中的加载的文件方式包含:

•httpReferrer:一个HTTP Referrer url
•userAgent 发起请求的 userAgent
•extraHeaders:用”\n“分割的额外标题
•baseURLForDataURL:要加载的数据文件的根URL(带有路径分隔符),只有当指定的url是一个数据url并需要加载其他文件时,才需要这样做

其实我也没太懂这些都是什么,反正据我理解,url加载的只能是远程地址(如:http://)或是本地的HTML文件路径(file://)

参考文章: segmentfault.com/a/119000001…

•打包报错

上述就是我在electron-vue中利用webpack实现多页面入口的全过程,不过最后打包时出现了错误,错误代码如下:

上网搜了一下,说是node内存溢出的问题,在package.json中手动设置node的内存大小就可以啦

"scripts": {
  "buildAll": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder",
  "build": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder --win --  ia32 --publish always",
  "build:dir": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder -- win --ia32 --dir",
  "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
  "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
  "dev": "node --max-old-space-size=4096 .electron-vue/dev-runner.js",
  "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
  "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
  "pack": "npm run pack:main && npm run pack:renderer",
  "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-  vue/webpack.main.config.js",
  "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config      .electron-vue/webpack.renderer.config.js"
},

总结

以上所述是小编给大家介绍的electron-vue利用webpack打包实现多页面的入口文件问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
vue中axios实现数据交互与跨域问题
May 12 #Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
JS块级作用域和私有变量实例分析
May 11 #Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 #Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 #Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Python反射用法实例简析
2017/12/22 Python
Python中反射和描述器总结
2018/09/23 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python能开发游戏吗
2020/06/11 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
员工薪酬福利制度
2014/01/17 职场文书
大学班级学风建设方案
2014/05/01 职场文书
校外活动方案
2014/08/28 职场文书
年度考核个人总结
2015/03/06 职场文书
通知函的格式
2015/04/27 职场文书
教师考核鉴定意见
2015/06/05 职场文书