这里没有
pwa的笔记，因为对着它上面的代码敲，结果居然 失 败 了 ~，所以就不做笔记了，后面有时间单独找时间去学习，至于node确实没必要使用webpack去构建。然后对着构建
Electron居然也失败了，就自己去查了Electron的一些相关资料，然后我感觉我这已经不能再叫学习笔记了。
目录结构
├─ public │ ├─ index.html ├─ src │ ├─ App.vue // vue 项目入口页面 │ ├─ main.js // vue 项目入口 ├─ main.js // Electron 的入口文件 ├─ package.json ├─ webpack.config.js // 子进程 webpack 配置
创建Electron主进程
Electron是分为主进程和子进程两个进程的，在运行Electron应用时，将从一个入口js文件开始，这个入口js文件就是根目录下的main.js文件，内容如下：
const { app, BrowserWindow } = require("electron"); // 应用启动后 app.whenReady().then(() => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 在 Electron 13+ 后，需要配置该属性 nodeIntegration: true, contextIsolation: false, } }); win.loadURL("http://localhost:8080"); });
Electron主进程的入口就是这么简单，接下来就直接npm i -D electron安装就好了。
友情提示：
Electron安装会被墙，所以推荐使用cnpm，或者添加环境变量ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" ELECTRON_CUSTOM_DIR="{{ version }}" npm i -D electron这里我为什么还推荐
cnpm而不是pnpm，因为我不会pnpm,cnpm安装也很简单
npm i -g cnpm--registry=https://registry.npm.taobao.org以后如果还有什么被墙的也可以直接使用，就是把
npm替换成cnpm就好了。
安装完成之后，直接命令行electron ./main.js就可以看到弹出了一个白板的页面。
上面的命令不能在
Windows PowerShell中执行，可以将该命令封装到package.json中执行。electron .是快捷命令，但是需要在package.json的main属性指定入口。
创建Electron子进程
上面的目录结构除了根目录下的main.js是和electron相关的，其他的都和electron关系不大，上面如果将根目录下的main.js文件去掉，妥妥的就是一个vue项目，不多说废话，直接看代码：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> </body> </html>
src/main.js
import {createApp} from 'vue' import App from './App.vue'; const app = createApp(App); app.mount('#app')
src/App.vue
<template> <h1>App...</h1> </template>
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); module.exports = { mode: "development", entry: "./src/main.js", // target 需要指定为 electron-renderer target: "electron-renderer", module: { rules: [ { test: /.vue$/, use: { loader: "vue-loader" }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }), new VueLoaderPlugin() ], devServer: { hot: true }, }
注意上面的webpack配置，指定了一个target属性，值为electron-renderer，这样webpack打包时才会将electron和node的一些功能打包进去，子进程才可以正常使用。
webpack为electron提供了三个可选的target属性值：electron-main、electron-renderer、electron-preload，详细参考：target
这里三个值只使用了一个，因为他们的效果是类似的，都是将electron的功能编译进目标文件，electron-main是编译主进程的，实测这种demo没必要使用。
运行
上面的搭建完成之后，启动主进程electron ./main.js，启动子进程npx webpack server，就可以看到效果了，然后再将命令封装一下，完整的package.json如下:
{ "name": "webpack-electron", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "electron .", "dev": "npx webpack server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron": "^20.0.2", "html-webpack-plugin": "^5.5.0", "vue-loader": "^17.0.0", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.10.0" }, "dependencies": { "vue": "^3.2.37" } }
总结
electron就是一个套件浏览器，同时开发electron有点类似微前端，所以可以跨语言开发，webpack提供的只是将各种语言编译成为让浏览器可以识别的结果，然后electron自带浏览器用于显示，以此让前端人员有可以进行桌面应用的开发。
