Electron 使用 Webpack2 打包应用程序

前两天看了一下使用 Electron 开发应用程序,今天说说所怎样集成 Electron 和 Webpack2 来打包应用程序。

安装依赖库

这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库

$ npm install --save-dev electron 
$ npm install --save-dev electron-packager
$ npm install --save-dev webpack 
$ npm install --save-dev webpack-dev-server

$ npm install --save-dev webpack-target-electron-renderer
$ npm install --save-dev is-electron-renderer
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin

注:这里使用的webpack是2.5.1版本

工程结构

这个演示程序包含的文件结构如下所示:

myapp
|-- main.js
|-- package.json
|-- src
|   |-- index.html
|   `-- index.js
`-- webpack.config.js
  • main.js - 程序的入口
  • package.json - 是node的包说明文件
  • src - 目录下的 index.html 和 index.js 文件是我们的演示页面内容
  • webpack.config.js - webpack配置文件

文件说明

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "electron": "webpack && electron .",
    "packager": "webpack && electron-packager . --platform=linux --electron-version=1.6.6  --overwrite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.1",
    "electron": "^1.6.7",
    "electron-packager": "^8.7.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "is-electron-renderer": "^2.0.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-target-electron-renderer": "^0.4.0"
  }
}
  • 其中 main 定义了 app 的入口
  • scripts 中的 electron 定义了一个命令用来使用 webpack 打包并使用 electron 来运行应用程序
  • scripts 中的 packager 定义了打包程序为一个可执行程序。

webpack.config.js

/* eslint strict: 0 */
'use strict';

const path = require('path');
const webpack = require('webpack');

module.exports ={
  target: 'electron-renderer',
  entry: [
    './src/index',
  ],
  output: {
    path: path.join(__dirname, 'build'),
    publicPath: path.join(__dirname, 'src'),
    filename: 'bundle.js',
  },
  module: {
    rules: []
  },
};
  • 其中 target 指定为 electron-renderer

main.js

Electron App 的入口 js 文件,启动一个窗口并加载 src/index.html 文件。

/* eslint strict: 0 */
'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 1024, height: 768 });

  mainWindow.loadURL(`file://${__dirname}/src/index.html`);

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
})

src/index.js

webpack 入口文件,这里仅仅打印当前应用是否是运行在 electron 中。

console.log('running in electron: ', require('is-electron-renderer'));

src/index.html

测试的 html 文件,其中使用了 webpack 预编译好的 bundle.js 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <script src="../build/bundle.js"></script>
    <ul>
      <li>Node: <script>document.write(process.versions.node)</script></li>
      <li>Chrome: <script>document.write(process.versions.chrome)</script></li>
      <li>Electron: <script>document.write(process.versions.electron)</script></li>
    </ul>
  </body>
</html>

测试

  • 直接运行 electron 应用程序 $ npm run electron 这一步会首先运行 “webpack” 来生成 bundle.js 文件,然后再使用 “electron .” 来运行应用程序。
  • 打包 electron 应用程序 $ npm run packager 上面程序执行后,会在当前目录下生成 myapp-linux-x64 目录,然后运行 myapp-linux-x64/myapp 即可启动打包好的可执行程序。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    kongxx
  • Webpack2入门

    kongxx
  • Windows上使用Python增加或删除权限Windows上使用Python增加或删除权限

    kongxx
  • 中兴智能视觉大数据报道:人工智能--下一个风口

    中兴智能视觉大数据报道:世界是由懒人创造的,相信很多人都听过这句话,正因为有了这些“懒人”,所以我们有了电梯、CD,洗碗机等等一系列可以代替人工的工具,随着科技...

    用户2155938
  • 机器人将挑战快递业的自动化障碍:自动拣货和包装

    电子商务的发展带动了快递的发展,为了增加效率,我国快递业中也开始使用上了机器人。目前快递使用的机器人大多数功能为分拣和派送,那么下一代快递机器人将会有什么功能呢...

    机器人网
  • 自动化技术将给发展中国家带来巨大影响

    同“互联网+”一样,把机器人只当作是一种生产工具的定义已经过时。 “互联网+”是网络虚拟技术(信息世界)对传统产业的升级改造,“机器人+”是现实硬件技术(物理世...

    钱塘数据
  • 从三大关键技术,看服务机器人未来发展趋势

    镁客网
  • 工业机器人的主要部件、材料、构形与控制系统

    一、工业机器人的主要组成部分 ? 1、机器人驱动装置 概念:要使机器人运行起来, 需给各个关节即每个运动自由度安置传动装置 作用:提供机器人各部位、各关节动作的...

    机器人网
  • 中国服务机器人获历史性突破 中科大勇夺机器人世界杯冠军

    在刚刚结束的RoboCup 2014机器人世界杯比赛中,中国科学技术大学自主研发的"可佳"智能服务机器人荣获冠军。这是我国服务机器人首次在国际服务机器人标准测试...

    机器人网
  • 小米发布米兔积木机器人,这次又是抄袭的?

    小米推出了双十一四大新品的最后一件——米兔积木机器人。这款机器人由978个零件构成,用户可自由组装零件,DIY不同的外形。在操作上,机器人支持手机遥控和模块化图...

    机器人网

扫码关注云+社区

领取腾讯云代金券