Electron 使用 Webpack2 预编译 Electron 和 Browser targets
时间:2022-05-14
本文章向大家介绍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 即可启动打包好的可执行程序。
- Enterprise Library 4.1学习笔记2----数据访问程序块
- 微信小程序中用户唯一ID的获取
- Mysql备份系列(2)--mysqldump备份(全量+增量)方案操作记录
- Enterprise Library 4.1学习笔记1----配置应用程序块(c/s和b/s均适用)
- 简单账本-用完即走的微信小程序
- 新技术革命和新产业变革正进行 “互联网+大数据+人工智能+”时代正到来
- 微信小程序开发及相关设置小结
- gitlab两种连接方式:ssh和http配置介绍
- C#实现微信AES-128-CBC加密数据的解密
- UrlReferrer为空的问题?
- DeepMind发文回顾2017:AlphaGo团队已迎战下一个重大挑战
- [你必须知道的.Net]读书笔记--浅clone与深clone
- Python基础语法学习整理
- 通过部分感知深度卷积网络进行人脸特征点定位
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python分析最近大火的网剧《隐秘的角落》
- PHP使用PDO操作sqlite数据库应用案例
- 一次因composer错误使用引发的问题与解决
- PHP生成二维码与识别二维码的方法详解【附源码下载】
- 详解PHP多个进程配合redis的有序集合实现大文件去重
- 原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
- php ajax confirm 删除实例详解
- PHP模糊查询技术实例分析【附源码下载】
- 解决keras,val_categorical_accuracy:,0.0000e+00问题
- 导致python中import错误的原因是什么
- Python RabbitMQ实现简单的进程间通信示例
- PHP删除数组中特定元素的两种方法
- 如何写出让同事无法维护的代码?
- 浅谈php://filter的妙用
- PHP中“=>