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 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
django model通过字典更新数据实例
2020/04/01 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
委托书范文
2014/04/02 职场文书
责任担保书范文
2014/05/21 职场文书
法人委托书
2014/07/31 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
庆祝教师节主持词
2015/07/06 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang