Electron 使用 Webpack2 预编译 Electron 和 Browser targets

前一篇文章说了说怎样使用 Webpack2 预编译 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
|-- webpack.config.js
`-- src
    |-- index.html
    |-- index.js
    |-- user.js
    `-- style.css
  • main.js - 程序的入口
  • package.json - 是node的包说明文件
  • webpack.config.js - webpack配置文件
  • src/index.html - 演示页面html文件
  • src/index.js - 演示页面js文件
  • src/user.js - 一个自定义的js模块
  • src/style.css - 演示用的css文件

文件说明

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "electron": "webpack --target electron-renderer && electron .",
    "web": "webpack --target web && webpack-dev-server --target web --hot --inline",
    "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 的入口，这里是使用的main.js作为入口。
  • scripts 中的 electron 使用 “webpack –target electron-renderer” 来打包js和css，然后仍然使用 electron 来运行应用程序。
  • scripts 中的 web 使用 “webpack –target web” 打包js和css，同样，后面在使用 webpack-dev-server 时也需要使用 “–target web”选项。
  • scripts 中的 packager 定义了打包程序为一个可执行程序。

webpack.config.js

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

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

module.exports ={
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'src'),
    publicPath: '/src/',
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }]
  }
};

* 注：webpack.config.js 中我去掉了target 配置项 *

main.js

/* 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 中。

import './style.css';

console.log('This is index!');

var User = require('./user');

var user1 = new User('kongxx');
console.log("Hi, I am " + user1.getName());

var user2 = new User('ken');
console.log("Hi, I am " + user2.getName());

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 type="text/javascript" src="./bundle.js" charset="utf-8"></script>
    <h1>Hello World</h1>
  </body>
</html>

src/user.js

一个自定义的模块文件

module.exports = User;

function User(name) {
  this.name = name;
}

User.prototype.getName = function() {
  return this.name;
}

src/style.css

一个自定义的 css 文件

body {
  background: grey;
  font-size: 20px;
}

测试

  • 作为 electron 应用程序运行

    $ npm run electron

  • 作为 web 应用程序运行

    $ npm run web

    运行起来后，在浏览器访问

    http://localhost:8080/webpack-dev-server/src/

    或

    http://localhost:8080/src/

    然后，随意修改一下 index.js、user.js 或 style.css 并保存，此时即可看到页面立刻自动刷新了，这就说明webpack 的热部署功能已经工作了。

  • 打包 electron 应用程序

    $ npm run packager

    上面程序执行后，会在当前目录下生成 myapp-linux-x64 目录，然后运行 myapp-linux-x64/myapp 即可启动打包好的可执行程序。

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

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

Electron 使用 Webpack2 预编译 Electron 和 Browser targets的更多相关文章

  1. Electron 使用 Webpack2 打包应用程序

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

  2. 修改Electron的libcc(libchromiumcontent)源码，重新编译electron， 设置event.isTrusted为true

    VPN非常注意: 编译的过程需要使用VPN, 否者chromium的源代码无法下载, 后面会出现总总问题 Electron的编译环境, 推荐使用物理机: win10 64位 英文版, 为了避免后期出现 ...

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

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

  4. 【Electron】使用 build-tools 在 Windows 中编译 electron

    [Electron]使用 build-tools 在 Windows 中编译 electron 提前准备 预留好磁盘空间 Git 缓存目录:%UserProfile%/.git_cache ,大概有 ...

  5. vue-cli3使用 DllPlugin 实现预编译，提升构建速度

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又 ...

  6. 警惕！高版本VS发布时预编译导致Mono中Razor找不到视图

    早前一段时间,一位朋友在Q群里面找到我,说它按照<Linux.NET学习手记>的操作,把一个ASP.NET MVC 4.0的项目部署到Mono之后出现Razor无法找到视图的现象.当时费了 ...

  7. .NET MVC Razor模板预编译（二）

    在前面一片文章:<.NET MVC4 Razor视图预编译(一)> 里面我采用的是PrecompiledMvcViewEngineContrib组件进行预编译视图的虚拟地址注册,但是这个组 ...

  8. .NET MVC4 Razor视图预编译（一）

    在平时使用.NET MVC中不乏有类似的需求:某些razor视图,特别是系统后台的视图,不想让用户自行更改,需要通过某种方法把视图模板编译到项目的dll中去. 但是VS并不提供razor的预编译,如果 ...

  9. JDBC_part2_DML以及预编译_编写DBUtil工具类

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! jdbc day02 DML语法 比起插叙语句,没有R ...

随机推荐

  1. nfs服务、crond服务

    一.nfs服务 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系 ...

  2. LeetCode：二进制手表【401】

    LeetCode:二进制手表[401] 题目描述 二进制手表顶部有 4 个 LED 代表小时(0-11),底部的 6 个 LED 代表分钟(0-59). 每个 LED 代表一个 0 或 1,最低位在右 ...

  3. js高级---js运行原理

    概述 浏览器组成可分两部分:Shell+内核.浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎.渲染引擎功能作用 渲染引擎,负责对网 ...

  4. nginx2

    Nginx的高可用是keeplived,keeplived是为lvs服务的. Nginx上分别安装keepalived,keepalived之间通过心跳交流,主节点宕机备节点起来.keepalived ...

  5. wpf利用线程制作初始界面和关闭窗体特效

    1.首先定义初始窗体,和主窗体. 初始窗体(StartWindow) 主窗体(MainWindow): 2.在主窗体界面中,加载初始窗体.注意在线程中操作UI元素需要使用BeginInvoke或者In ...

  6. 如何修改Django中的日期和时间格式 DateTimeField

    html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2017-06-03 13:00:00,但是页面显示的却是Apr. 03, 2 ...

  7. 20145219 《Java程序设计》第10周学习总结

    20145219 <Java程序设计>第10周学习总结 教材学习内容总结 Java的网络编程 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 网络概述 1.计算机 ...

  8. java.lang.String里面的trim()方法——删除首尾空格

    结果如图 package com.softeasy.test1; public class String_trim { public static void main(String[] args) { ...

  9. Maven+Struts+Hibernate+Spring简单项目搭建

    这段时间学习如何使用Maven+Struts+Hibernate+Spring注解方式建立项目,在这里感谢孙宇老师.    第一次写博客,主要是方便自己查看,同时分享给大家,希望对大家有所帮助,我也是 ...

  10. Android中获取并设置屏幕亮度

    最近在做一个Demo的时候用到了调节屏幕亮度的功能,于是上网搜索了一下,并且写了一个小Demo测试了一下,发现代码还是比较简单的.Android中的亮度调节,主要有三个方向,一个是针对于系统的亮度调节 ...