简介
electron-webpack-js 是一个基于 Electron 和 Webpack 的 npm 包，可用于构建具有强大功能和拓展性的桌面应用程序。它可以自动化构建，增加开发和生成生产版本等诸多特性，大大提高了开发效率。
在本篇文章中，我们将会介绍如何使用 electron-webpack-js 构建一个 Electron 应用程序。
安装
使用 npm 安装 electron-webpack-js，可以在终端中输入以下命令：
npm install --save-dev electron-webpack-js
配置
1. Webpack
electron-webpack-js 可以通过 Webpack 配置来定制应用程序的构建过程。在项目中创建 webpack.config.js 文件，并且将以下内容添加到该文件中：
module.exports = {
entry: './src/index.js', // 入口文件
output: {
path: __dirname + '/dist', // 输出目录
filename: 'bundle.js' // 输出文件名
}
}2. Electron
在项目目录下创建文件 main.js，该文件是 Electron 应用程序的主要入口点。将以下基础代码放入 main.js 中：
-- -------------------- ---- -------
----- - ---- ------------- - - -------------------
----- ---- - ---------------
--- ----------
-------- ------------ -- -
---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- -----
----------------- ------
------------------- -----
-
--
---------------------------------
----------------------- -------- -- -
---------- - ----
--
-
--------------- -------------
--------------------------- -------- -- -
-- ----------------- --- --------- -
----------
-
--
------------------ -------- -- -
-- ----------- --- ----- -
--------------
-
--其中，我们通过 require 引入了 Electron 的 app 和 BrowserWindow 模块，然后在 createWindows 函数中创建了应用程序的主窗口。同时，我们还监听了各种窗口事件和应用程序生命周期事件。
3. package.json
将以下基础代码插入你项目的 package.json 文件中，它将启动 webpack 打包和 electron 运行：
{
"scripts": {
"start": "electron-webpack-js start"
}
}4. 构建
现在，我们可以使用 npm 运行命令 npm run start，开始构建应用程序。
结语
electron-webpack-js 是一个非常强大的开发库，它使得构建 Electron 应用程序变得更加容易。希望本文可以在一定程度上帮助你掌握 electron-webpack-js 的使用，让你可以快速构建出高质量的桌面应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae66b5cbfe1ea0610e2f