开发¶

安装¶

由于 electron-webpack 是一个模块，而不是一个样板，让我们安装它和其他一些依赖项。

yarn add electron-webpack electron webpack --dev
yarn add source-map-support

在开发模式下启动¶

默认情况下，electron-webpack 期望至少在 src/main/index.js 中有一个 main 进程入口点（更多信息）。一旦您设置好入口文件，您可以运行 electron-webpack dev 来开始。为了更方便，请在您的 package.json 中设置一个脚本，以在开发模式下启动您的应用程序。

package.json

{
  "scripts": {
    "dev": "electron-webpack dev"
  }
}

如果您正在使用 electron-webpack-quick-start 并且已经安装了依赖项，只需运行以下命令即可在开发模式下打开您的应用程序。

yarn dev

源别名¶

electron-webpack 提供了一些源别名，或者 TypeScript 称之为路径映射，它们使您可以更轻松地导入模块。

@: 提供到相应进程的路径 (main 或 renderer)
common: 提供到通用源目录的路径

关于魔法的一些说明¶

对于一些局外人来说，electron-webpack 可能看起来像一个神奇的模块，但让我们介绍一下幕后发生的一些事情。

热模块替换¶

Webpack HMR 已设置为支持 renderer 和 main 进程。这允许更快的开发，确保您的应用程序仅在必要时重新启动。您需要做的就是在您的入口文件中接受热更新

// in main/index.js, renderer/index.js or in both
if (module.hot) {
  module.hot.accept();
}

查看这篇文章以获取有关 electron-webpack 中 HMR 的更多详细信息，以及官方 webpack 文档以获取有关 HMR API 的详细信息和选项。

为 `renderer` 和 `main` 进程打包¶

webpack 已经设置为每个进程都有一个入口点。此外，您还可以在需要时轻松地向 main 进程添加更多入口点。在其他只需要支持 main 进程的情况下，您甚至可以在需要时跳过 renderer 进程（更多信息）。

`html-webpack-plugin` 的使用¶

您可能会注意到，您不需要 index.html 即可开始开发您的应用程序。那是因为它是为您创建的，因为它添加了一些 electron 环境所需的额外配置。如果您正在使用 webpack 创建 electron 应用程序，那么您很可能无论如何都在创建单页应用程序。因此，正因为如此，标记中已经提供了一个 <div id="app"></div>，您可以将您的应用程序挂载到该标记上。

Windows 用户注意事项¶

如果您在安装依赖项时遇到与 node-gyp 相关的错误，那么您很可能没有在您的系统上安装正确的构建工具。构建工具包括 Python 和 Visual Studio 等项目。

您可以通过全局安装 windows-build-tools 来快速安装这些构建工具。它提供了许多项目，如 Visual C++ 包、Python 等。

开发¶

安装¶