electron-vue利用webpack打包实现多页面的入口文件问题
作者:暖暖~酱 发布时间:2024-05-13 10:39:51
项目需要在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打包实现多页面的入口文件问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://juejin.im/post/5cd6a07b518825686761ccbe
猜你喜欢
- lambda函数的定义   lambda函数是Python中常用的内置函数,又称为匿名
- 在极坐标中,圆的表示方式为:x=x0+rcosθy=y0+rsinθ圆心为(x0,y0),r为半径,θ为旋转度数,值范围为0-359如果给定
- 问题:连续或者单个窗体,如何打印当前显示的记录?当前窗体还有对应的子窗体,也要一起打印出来我在一个窗体里有一个单号,大子窗体里有几组数据,我
- 由于测试环境上面使用的zabbix服务器配置比较低,经常会遇到性能瓶颈(主要是数据库和磁盘I/O等),于是倒逼我使用了一些方式来缓解这些问题
- 一、功能说明:1. 多线程方式抓取代理服务器,并多线程验证代理服务器ps 代理服务器是从http://www.cnproxy.com/ (测
- 继上篇博客Python实现简易通讯录后,我就想写一个复杂点的学生信息管理系统,这次实现的功能有1.学生信息的录入管理;2.学生选课操作;3.
- 我们从小学的时候就学习了奇数偶数,知道整数可以分成奇数和偶数两大类,能被2整除的数叫做偶数,不能被2整除的数叫做奇数。在我们python编程
- 数据库中内置函数的使用该篇主要介绍数据库中内置函数的使用,主要有日期函数,字符串函数,数学函数。(一)日期函数select current_
- 一空间多域名绑定3种方法,HTML代码格式:<html> <script language=javascript
- 1.Quiz有如下一个例子:package mainimport ("encoding/json""fmt&q
- 如下所示:def draw_circle(event,x,y,flags,param): global ix,iy,drawin
- 本文实例为大家分享了python实现ANN的具体代码,供大家参考,具体内容如下1.简要介绍神经网络神经网络是具有适应性的简单单元组成的广泛并
- 1、先说恢复误删单元格的操作场景:不小心把某个cell给cut了,或者删除了单元格(前提不要关闭notebook窗口)。解决方法: 先按Es
- "神经衰弱"翻牌游戏考察玩家的记忆力,游戏的开头会短时间给你看一小部分牌的图案,当玩家翻开两张相同图案牌的时候,会消除,
- 本文实例讲述了PHP共享内存使用与信号控制。分享给大家供大家参考,具体如下:共享内存共享内存的使用主要是为了能够在同一台机器不同的进程中共享
- 一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !impor
- 本文实例为大家分享了Vue实现无限加载瀑布流的具体代码,供大家参考,具体内容如下我做的这个瀑布流放在了一个嵌套页面里,就是类似管理后台的ma
- 一、jupyter notebook是什么官网的介绍是:Jupyter Notebook是一个Web应用程序,允许您创建和共享包含实时代码,
- 1.代码准备没有语法错误的Python程序:#!/usr/bin/pythonimport numpy as npclass Network
- rs.open sql,conn:如果sql是delete,update,insert则会返