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实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
vue之数据交互实例代码
Jun 20 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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检测图片主要颜色的方法
2015/07/01 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python中reduce()函数的使用方法示例
2017/09/29 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
教师年终个人自我评价
2013/10/04 职场文书
满月酒答谢词
2014/01/14 职场文书
四年级科学教学反思
2014/02/10 职场文书
2015年教师节活动总结
2015/03/20 职场文书
防暑降温通知书
2015/04/27 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python