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 相关文章推荐
JavaScript中链式调用之研习
Apr 07 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
jquery动态添加option示例
Dec 30 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
赔偿协议书范本
2014/09/12 职场文书
反四风对照检查材料
2014/09/22 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
租车协议书
2015/01/27 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
股东大会通知
2015/04/24 职场文书
让子弹飞观后感
2015/06/11 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis