说起 Electron，大家能定不会感觉到陌生，庞大的体积，内置浏览器，Hello World 都有 200+M... 我个人是很反感跨段应用的，虽然对于开发来说，节省了很多时间，但是站在用户的角度来讲，体验就不是那么称心如意了。但是最近一些业务需要用到 Electron，折腾过程中也踩了不少坑，总结一下。

平时我们在开发前端应用时，一般都是使用 Webpack 去打包，在开发环境中，也是由 Webpack dev server 来实现 HMR。在 Electron 中也是可以使用 Webpack 的。

我们使用 electron-wepack 包，简单搭建一下环境。

然后我们参考这个项目结构建立目录：

src 目录下的分别为存放 Electron 主进程逻辑(main) 和 渲染层(renderer)。入口文件必须为 index 或 main

安装完以上依赖，electron-webpack 会识别支持 TypeScript。

在 src/renderer/index.ts 中，你可以操作 DOM 树。electron-wepack默认会提供一个空白的 HTML 文档，只有一个 #app 节点供你使用，你无法通过一般操作自定义一个入口 index.html， 但是你也可以用其他手段达到这个目标，在此不多赘述 (参看 issue)。

在 src/main/index.ts 中， 简单建立一个 app

其次是 window.ts，建立一个 window

在 package.json 中添加。

执行 yarn start 。发现正确显示了 Hello World。

使用 yarn package 来生成 dmg 也是没有问题的。一般教程到此就结束了，但是我们的需求并不是这么简单，我们还需要配置其他，比如 app version，app icon，app sign key... 而这些配置也有很多坑。

应用图标需要不同大小的几张 png 以及 icns 等格式的图片，手动操作比较麻烦，我们可以用一张 png 去生成，使用 electron-icon-builder 工具就能轻松转换到我们想要的结果。

把生成的文件放入 resources 文件夹内，如不存在则新建。

在 package.json 中加入 build 字段，用于配置 electron-builder。

这里是个大坑，因为我们自定义了配置，覆盖了原来 electron-webpack 的配置，所以有几个地方是必须要这么写的，否则就会在打包之后无法显示 renderer 或者 找不到入口文件。这是我自己摸索出来的，比较 hack 的方法。因为我实在找不到答案。

如果你需要使用 __static 常量的话，

最后，附上 GitHub 地址：