electron-vue利用webpack打包实现多页面的入口文件问题
项目需要在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打包实现多页面的入口文件问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
- 在vue中用webpack打包之后运行文件问题以及相关配置
- vue+webpack解决css引用图片打包后找不到资源文件的问题
- vue-cli项目webpack打包后iconfont文件路径问题解决
- webpack多入口文件页面打包配置详解
- 关于webpack打包vue项目后的页面body为空的问题
- vue做的单页面组件(单文件组件)不起作用,webpack已经打包成功,页面中没有结果
- 解决vue-cli项目webpack打包后iconfont文件路径的问题
- vue+webpack 打包文件 404 页面空白
- webpack多入口文件页面打包配置
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- vue+webpack 打包文件 404 页面空白的解决方法
- 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
- 解决webpack打包文件过大的问题
- webpack实现分别打包自己的js 和第三方包js,以及版本迭代浏览器缓存问题
- webpack配合vue.js实现完整的单页面demo
- vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件
- 「webpack工程师」 用 webpack4 打包vue前端多页面项目
- 【最简单】Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件)
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- VUE+WebPack精美游戏设计:实现像微信红包打开时钱币转动的动画精灵和页面数据的本地存储