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打包實現多頁面的入口文件問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！