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 即可启动打包好的可执行程序。

转载请以链接形式标明本文地址

本文地址：http://blog.csdn.net/kongxx/article/details/72235407

Electron 使用 Webpack2 打包应用程序的更多相关文章

  1. Electron 使用 Webpack2 打包多入口应用程序

    Electron 使用 Webpack2 打包多入口应用程序 接前面一篇文章,前一篇文章中只有一个页面,并且只有一个js文件,所以打包的时候会把那个js打包成一个bundle.js文件.但是假如我们有 ...

  2. Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...

  3. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  4. Electron入门应用打包exe（windows）

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

  5. InstallShield Limited Edition for Visual Studio 2013 图文教程（教你如何打包.NET程序）

    InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序) 标签: InstallShieldVS2013 2015 ...

  6. 使用Inno Setup 打包.NET程序,并自动安装.Net Framework

    使用Inno Setup 打包.NET程序,并自动安装.Net Framework http://www.cnblogs.com/xiaogangqq123/archive/2012/03/19/24 ...

  7. MAC下配置gradle用eclipse 打包android程序

    1.下载gradle binhttp://gradle.org/gradle-download/ 2.配置gradle,http://www.douban.com/note/311599602/htt ...

  8. vs2010打包winform程序详解

    vs2010打包winform程序详解   最近一直在做winform程序,做完后程序打包很头疼,第三方打包工具,好用的花钱,不花钱的不好用,最后只能用vs自带的打包工具了! 打包过程vs2010(包 ...

  9. Windows如何打包Qt程序

    很多Qt爱好者想发布自己的Qt软件,但却发现在其他没有安装Qt SDK的机器上无法运行,这就是本文想要说明的问题.现在网上大部分软件都要发布自己开发的应用程序,都会打包到exe文件中,待安装完exe文 ...

随机推荐

  1. Flask 请求源码分析

    执行app.run()方法: def run(self, host=None, port=None, debug=None, **options): from werkzeug.serving imp ...

  2. python代码结构

    1. 使用#单行注释,使用'''...'''多行注释 2. 使用连接符\来把一行过长的代码分为多行 3. 用缩进来控制代码块,推荐使用PEP8缩进风格,即四个空格 4. if ...: elif... ...

  3. 搭建自己的npm仓库

    第一步:安装Erlang环境 首先,安装必要的库 yum install build-essential yum install libncurses5-dev yum install libssl- ...

  4. 整合subeclipse和Tortoise SVN

      先来一个下载链接(subeclipse1.8和TortoiseSVN1.7): http://download.csdn.net/detail/cangfengluyu/8416395   对于同 ...

  5. $python虚拟化运行环境——virtualenv

    介绍 virtualenv是一种虚拟化环境,可以理解为创建了一个虚拟化的pyhon运行空间,可以从新安装各种库,而与本机环境互不影响,互相隔离. 安装及使用 首先要安装包管理工具pip(pip的使用详 ...

  6. linux:查看磁盘硬件信息hdparm,smartctl

    smartctl 命令 这个一个用于控制和监控支持smart技术的硬盘的命令.通常配合 -a 选项我们可以查看到比较详尽的硬盘信息(比如序列号.硬盘容量.已运行时间.硬盘健康状况等).用法如下: sm ...

  7. Please make sure the TESSDATA_PREFIX environment variable is set to your "tessdata" directory.

    tesseract的一个操作问题,简单记录 类似坑尽量少踩 运行 .\tesseract.exe .\1356445914_9857.jpg tstimg  报错如下:Please make sure ...

  8. pyqt4学习之一：搭建环境和入门

    还在继续写Python小工具,想起之前用Tkinter被坑得半死,决定换个框架写UI,又想顺便了解一下qt,就学习一下pyqt4 搭建环境 win:现在安装包 http://www.riverbank ...

  9. 周立功CAN-II引脚图

    注意:如果需要两个CAN通道通信,直接用杜邦线将L连L,H连H,地连地就行(3.6引脚已做短接处理),不需要反接

  10. （转）Java编译后产生class文件的命名规则

      今天刚好有同学问了下Java编译后产生的.class文件名的问题,虽然一直都在使用Java做开发,但是之前对编译后产生的.class文件名的规范也基本没做了解过,也真的是忏愧啊!今天无论如何都要总 ...