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的配置，我主要是在fig中配置多个⼊⼝，⽣成多页⾯的⼊⼝⽂件，代码如下：
webpack中的HtmlWebpackPlugin插件是⽤来简单创建HTML⽂件，⽤于服务器访问。必须在新建HtmlWebpackPlugin中写chunks，不然⽆法识别，页⾯加载不出来
•electron中新建窗⼝，访问新⽣成的页⾯
electron vue教程
electron中src的main⽂件中的index.js为主进程，在该页⾯中新建窗⼝，调⽤新⽣成的HTML⽂件，代码如下：
const dialpadUrl = v.NODE_ENV === 'development'
`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并需要加载其他⽂件时，才需要这样做
参考⽂章： segmentfault/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/fig.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config      .fig.js"
},
总结
以上所述是⼩编给⼤家介绍的electron-vue利⽤webpack打包实现多页⾯的⼊⼝⽂件问题，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。