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://)
-
打包報錯
上述就是我在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"
},
複製程式碼
參考文章：segmentfault.com/a/119000001…
這就是我的分享，有什麼不對的地方歡迎指正。