項(xiàng)目需要在electron的項(xiàng)目中新打開一個(gè)窗口，利用webpack作為靜態(tài)資源打包器，發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口，今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗(yàn)。

1、webpack的核心概念

•Entry：入口，Webpack執(zhí)行構(gòu)建的第一步從Entry開始；
•Module：模塊，在Webpack里一切皆模塊，一個(gè)模塊對應(yīng)著一個(gè)文件。Webpack會(huì)從配置的Entry開始遞歸找出所有依賴的模塊。
•Chunk：代碼塊，一個(gè)Chunk由多個(gè)模塊組合而成，用于代碼合并與分割。
•Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
•Plugin：擴(kuò)展插件，在Webpack構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。
•Output：輸出結(jié)果，在Webpack經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。

2、配置多頁面的入口文件

electron構(gòu)建后的項(xiàng)目目錄如下：

•創(chuàng)建新的頁面

vue-cli生成的項(xiàng)目中只有一個(gè)main.js主入口的js文件來處理所有的vue頁面，我們創(chuàng)建多個(gè)頁面需要生成一個(gè)這個(gè)頁面相對應(yīng)的js文件，保存該頁面中包含的內(nèi)容。

•配置多頁面的入口文件

electron-vue創(chuàng)建的項(xiàng)目中有三個(gè)webpack的配置，我主要是在webpack.renderer.config中配置多個(gè)入口，生成多頁面的入口文件，代碼如下：

webpack中的HtmlWebpackPlugin插件是用來簡單創(chuàng)建HTML文件，用于服務(wù)器訪問。必須在新建HtmlWebpackPlugin中寫chunks,不然無法識(shí)別，頁面加載不出來

•electron中新建窗口，訪問新生成的頁面

electron中src的main文件中的index.js為主進(jìn)程，在該頁面中新建窗口，調(diào)用新生成的HTML文件，代碼如下：

const dialpadUrl = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/dialpad.html`
 : `file://${__dirname}/dialpad.html`

創(chuàng)建新窗口打開頁面的地址。electron的win.loadURL(url[, options])中的加載的文件方式包含：

•httpReferrer：一個(gè)HTTP Referrer url
•userAgent 發(fā)起請求的 userAgent
•extraHeaders：用”\n“分割的額外標(biāo)題
•baseURLForDataURL：要加載的數(shù)據(jù)文件的根URL(帶有路徑分隔符)，只有當(dāng)指定的url是一個(gè)數(shù)據(jù)url并需要加載其他文件時(shí)，才需要這樣做

其實(shí)我也沒太懂這些都是什么，反正據(jù)我理解，url加載的只能是遠(yuǎn)程地址(如：http://)或是本地的HTML文件路徑(file://)

參考文章： segmentfault.com/a/119000001…

•打包報(bào)錯(cuò)

上述就是我在electron-vue中利用webpack實(shí)現(xiàn)多頁面入口的全過程，不過最后打包時(shí)出現(xiàn)了錯(cuò)誤，錯(cuò)誤代碼如下：

上網(wǎng)搜了一下，說是node內(nèi)存溢出的問題，在package.json中手動(dòng)設(shè)置node的內(nèi)存大小就可以啦

"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"
},

總結(jié)

以上所述是小編給大家介紹的electron-vue利用webpack打包實(shí)現(xiàn)多頁面的入口文件問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評論