二、Electron + Webpack + Vue 搭建開發環境及打包安裝
阿新 • • 發佈：2020-12-18
目錄
- Webpack + Vue 搭建開發環境及打包安裝 ------- 打包渲染程序
- Electron + Webpack 搭建開發環境及打包安裝 ------- 打包主程序
- Electron + Webpack + Vue 搭建開發環境及打包安裝 ---- 打包electron應用
二、打包主執行緒
1. 專案目錄結構
首先建立一個專案資料夾main 然後在該資料夾中執行 npm init -y 命令
目錄結構說明：
main
| - app 檔案輸出目錄
| - builder 構建配置目錄
| - webpack.config.js
| - src 資原始檔目錄
| - createWindow
| - index.js
| - index.html
| main.js
| - package.json
2. 書寫配置檔案
/builder/webpack.config.js 新增一下程式碼
1 const path = require('path'); 2 const webpack = require('webpack'); 3 const { dependencies } = require('../package.json'); 4 const ElectronDevWebpackPlugin = require('electron-dev-webpack-plugin'); 5 6 module.exports = { 7 // 配置開發模式 8 mode: 'development', 9 entry: { 10 // 配置入口檔案 11 main: path.join(__dirname, '../src/main.js') 12 }, 13 // 配置出口檔案 14 output: { 15 path: path.join(__dirname, '../app/'), 16 libraryTarget: 'commonjs2', 17 filename: '[name].js' 18 }, 19 // 監聽檔案改變 20 watch: true, 21 optimization: { 22 minimize: true, 23 }, 24 module: { 25 rules: [{ 26 test: /\.js$/, 27 loader: 'babel-loader', 28 exclude: /node_modules/ 29 }, { 30 test: /\.node$/, 31 loader: 'node-loader' 32 }] 33 }, 34 externals: [ 35 ...Object.keys(dependencies || {}) 36 ], 37 node: { 38 __dirname: true, 39 __filename: true 40 }, 41 plugins: [ 42 new webpack.DefinePlugin({}), 43 new ElectronDevWebpackPlugin() 44 ], 45 target: 'electron-main' 46 }
/builder/dev.js 新增一下程式碼
1 const webpack = require('webpack'); 2 const mainConfig = require('./webpack.config.js'); 3 4 function mainDev(){ 5 // 執行 webpack打包 6 webpack(mainConfig, err => { 7 if(err){ 8 console.log('打包主程序遇到Error！'); 9 } else { 10 console.log("打包主程序成功"); 11 } 12 }) 13 } 14 15 mainDev();
/src/mian.js 新增一下程式碼
1 const electron = require('electron'); 2 const { createMianWin } = require('./createWindow'); 3 const path = require("path"); 4 5 class App { 6 constructor({app, BrowserWindow}){ 7 this.BrowserWindow = BrowserWindow; 8 this.app = app; 9 this.win = null; 10 this.eventHandle(app); 11 } 12 createWindow(){ 13 this.win = createMianWin(); 14 let filePath = path.join(__dirname, './index.html'); 15 this.win.loadFile(filePath); 16 // 等待渲染程序頁面載入完畢再顯示視窗 17 this.win.once('ready-to-show', () => this.win.show()) 18 } 19 eventHandle(app){ 20 app.on('closed', () => this.closed()); 21 app.on('ready', () => this.ready()); 22 app.on('window-all-closed', () => this.windowAllClosed()); 23 app.on('activate', () => this.activate()); 24 } 25 activate(){ 26 if(!this.win) this.createWindow(); 27 } 28 windowAllClosed(){ 29 if(process.platform !== 'darwin') this.app.quit(); 30 } 31 ready(){ 32 this.createWindow(); // 建立主視窗 33 } 34 closed(){ 35 this.win = null; 36 } 37 } 38 39 let app = new App(electron);
/src/createWindow/index.js 新增如下程式碼
1 const { BrowserWindow, dialog } = require('electron'); 2 3 module.exports = { 4 createMianWin(options = {}){ 5 options = Object.assign({ 6 width: 1200, // 視窗寬度 7 height: 800, // 視窗高度 8 // autoHideMenuBar:true, 9 backgroundColor: '#fff', // 視窗背景顏色 10 show: false, // 建立視窗後不顯示視窗 11 hasShadow: false, 12 webPreferences:{ 13 nodeIntegration: true, // 在渲染程序引入node模組 14 } 15 }, options); 16 return new BrowserWindow(options); 17 } 18 }
/src/index.html 新增如下程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>electron</title> 6 </head> 7 <body> 8 <h1>Hello Electron</h1> 9 </body> 10 </html>
3. 新增npm 命令
/package.json 新增 npm 指令碼命令
"dev": "node ./builder/dev.js"
4. 安裝所需依賴
- webpack
- webpack-cli
- electron-dev-webpack-plugin
- babel-loader
- node-loader
- electron
- @babel/core
吐槽一句：昨天在寫部落格的時候 webpack 還是 5.10.3 版本今天就變成 5.11.0版本了
5. 執行npm 指令碼
在專案的目錄下執行 npm run dev 執行成功將會看到如下介面
然後會自動彈出electron App 視窗介面 如下效果表示配置成功
6. 測試熱載入是否生效
開啟 /src/main.js 對其中的程式碼進行修改然後再次儲存，electron App 視窗會裡面重新關閉並自動重啟編譯，表示熱載入配置成功
7. 總結
至於還有打包生成exe可執行檔案在後面 進行組合一起的時候再進行說明，最後就是在這裡附上原始碼地址https://github.com/Liting1/webpack5-electron
如果有問題可以留言討論