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 checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
高中物理教学反思
2014/02/08 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
观看信仰心得体会
2014/09/04 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年财政局工作总结
2014/12/09 职场文书
婚礼新人答谢词
2015/01/04 职场文书
内乡县衙导游词
2015/02/05 职场文书
运动会100米广播稿
2015/08/19 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
MySQL 数据表操作
2022/05/04 MySQL