Electron 使用 Webpack2 打包多入口应用程序
Electron 使用 Webpack2 打包多入口应用程序
接前面一篇文章,前一篇文章中只有一个页面,并且只有一个js文件,所以打包的时候会把那个js打包成一个bundle.js文件。但是假如我们有多个页面,且每个页面需要使用的js文件也不同,那么我们应该怎样打包呢。
安装依赖库
这里准备做个小的演示程序,首先安装一些这个演示程序需要看的第三方库
$ 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
| |-- home.html
| |-- home.js
| |-- about.html
| |-- about.js
| |-- contact.html
| |-- contact.js
| |-- user.js
| `-- style.css
`-- webpack.config.js
- main.js - 程序的入口
- package.json - 是node的包说明文件
- webpack.config.js - webpack配置文件
- src/home.html和home.js - 主页面
- src/about.html和about.js- 关于页面
- src/contact.html和contact.js- 联系我们页面
- src/user.js - 一个自定义的js模块
- src/style.css - 演示用的css文件
文件说明
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: {
home: "./src/home.js",
about: "./src/about.js",
contact: "./src/contact.js"
},
output: {
path: path.join(__dirname, 'build'),
publicPath: path.join(__dirname, 'src'),
filename: '[name].bundle.js',
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}
};
- 其中 target 指定为 electron-renderer
- 定义了多个entry - home, about 和 contact
- output 中 filename 定义成 ‘[name].bundle.js’,其中 [name] 即是上面 entry 中定义的名字。
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/home.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
})
Home Page
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<script src="../build/home.bundle.js"></script>
<h1>This is home!</h1>
<ul>
<li><a href="./contact.html">Contact us</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</body>
</html>
注:其中引用的js变成了 home.bundle.js
home.js
import './style.css';
console.log('This is home!');
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'));
About Page
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<script src="../build/about.bundle.js"></script>
<h1>This is about!</h1>
<a href="./home.html">Back</a>
</body>
</html>
注:其中引用的js是 about.bundle.js
about.js
import './style.css';
console.log('This is about!');
Contact us Page
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
</head>
<body>
<script src="../build/contact.bundle.js"></script>
<h1>This is contact!</h1>
<a href="./home.html">Back</a>
</body>
</html>
注:其中引用的js是 contact.bundle.js
contact.js
import './style.css';
console.log('This is contact!');
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 > myapp@1.0.0 electron /home/jhadmin/workspace/nodejs/myapp > webpack && electron . Hash: 1ebbb1014b2da9075658 Version: webpack 2.5.1 Time: 500ms Asset Size Chunks Chunk Names home.bundle.js 19.8 kB 0 [emitted] home contact.bundle.js 19 kB 1 [emitted] contact about.bundle.js 19 kB 2 [emitted] about [0] ./src/style.css 996 bytes {0} {1} {2} [built] [1] ./~/css-loader!./src/style.css 215 bytes {0} {1} {2} [built] [2] ./~/css-loader/lib/css-base.js 2.26 kB {0} {1} {2} [built] [3] ./~/style-loader/addStyles.js 9.15 kB {0} {1} {2} [built] [4] ./~/style-loader/fixUrls.js 3.01 kB {0} {1} {2} [built] [5] ./~/is-electron-renderer/index.js 304 bytes {0} [built] [6] ./src/user.js 127 bytes {0} [built] [7] ./src/about.js 55 bytes {2} [built] [8] ./src/contact.js 57 bytes {1} [built] [9] ./src/home.js 320 bytes {0} [built]
这一步会首先运行 “webpack” 来生成 home.bundle.js,about.bundle.js 和 contact.bundle.js 文件,然后再使用 “electron .” 来运行应用程序。
访问不同的页面观察日志输出可以发现每个页面均使用了各自的 bundle.js 文件。
打包 electron 应用程序
$ npm run packager
上面程序执行后,会在当前目录下生成 myapp-linux-x64 目录,然后运行 myapp-linux-x64/myapp 即可启动打包好的可执行程序。
转载请以链接形式标明本文地址
本文地址:http://blog.csdn.net/kongxx/article/details/72356566
Electron 使用 Webpack2 打包多入口应用程序的更多相关文章
- Electron 使用 Webpack2 打包应用程序
Electron 使用 Webpack2 打包应用程序 前两天看了一下使用 Electron 来开发应用程序,今天说说所怎样集成 Electron 和 Webpack2 来打包应用程序. 安装依赖库 ...
- Electron 使用 Webpack2 预编译 Electron 和 Browser targets
Electron 使用 Webpack2 预编译 Electron 和 Browser targets 前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使 ...
- Electron桌面应用打包流程
一. 准备工作 1.npm的安装需要下载node.js,安装完node.js之后npm自然会有. 参考链接:http://www.runoob.com/nodejs/nodejs-install-se ...
- Electron把网页打包成桌面应用并进行源码加密
前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...
- electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动
1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...
- 使用IzPack打包JAVA Web应用程序
使用IzPack打包JAVA Web应用程序步骤如下: 这里使用IzPack-4.3.5 + launch4j-3.1.0-beta1-win32.zip(绿色版)对Web应用程序打包,打包后即可对我 ...
- Unity3D 程序打包报错(程序是连接数据库进行处理的)
打包这个Unity3D的程序时出现错误(程序是由XML数据改成连接数据库): ArgumentException: The Assembly System.Configuration is refer ...
- 打包.NET Core的程序到一个单独的可执行文件
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:打包.NET Core的程序到一个单独的可执行文件.
- Oracle oledb 打包并集成到程序安装包(VC ADO訪问Oracle)
近期有一个项目和oracle交互,我用的是ADO的方式进行试问操作. 首先把数据库连接的东东记录一下,老了记性不好啊! 操作例如以下: //连接串这么写的话就能够不用配置 tnsnames.ora配置 ...
随机推荐
- openCV学习——一、Mat类
一.Mat数据类型 在以下两个场景中使用 OpenCV 时,我们必须事先知道矩阵元素的数据类型: 使用 at 方法访问数据元素的时候要指明数据类型 做数值运算的时候,比如究竟是整数除法还是浮点数除法. ...
- LeetCode:组合总数II【40】
LeetCode:组合总数II[40] 题目描述 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candi ...
- INFO hdfs.DFSClient: Exception in createBlockOutputStream java.net解决办法
自己安装好Hadoop2.7.x之后,发现dfs中的/bin/hadoop fs -put命令不能够使用,报错如下: [hadoop@master bin]$ ./hadoop fs -put ../ ...
- 使用Socket&反射&Java流操作进行方法的远程调用(模拟RPC远程调用)
写在前面 阅读本文首先得具备基本的Socket.反射.Java流操作的基本API使用知识:否则本文你可能看不懂... 服务端的端口监听 进行远程调用,那就必须得有客户端和服务端.服务端负责提供服务,客 ...
- ajax 事件使用
error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLH ...
- GPL协议本身就是剥削,oracle维权玩的让人恶心
我们先来看一下MySQL的版权问题.当前,MySQL采用双重授权(Dual Licensed),他们是GPL和MySQL AB制定的商业许可协议.如果你在一个遵循GPL的自由(开源)项目中使用MyS ...
- Windows Server 2008 R2 FTP无法从外部访问的解决方法
在Windows Server 2008 R2中配置好FTP服务器后,可以在本机访问,但是无法从另一台电脑访问.原因就是在于防火墙没有配置好. 1.首先检查服务器管理器中的入站规则,确保已启用FTP服 ...
- Madplay移植到mini2440开发板【转】
本文转载自:https://blog.csdn.net/simanstar/article/details/24035379 madplay交叉编译 交叉编译器:arm-linux-gcc 3.4.1 ...
- java.lang.IllegalStateException: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]
1.问题描述: 对于创建的springboot项目,通过启动类启动,访问没问题,但打成war部署到tomcat上启动报错,如下: 严重: ContainerBase.addChild: start: ...
- tomcat常用配置详解和优化方法
tomcat常用配置详解和优化方法 参考: http://blog.csdn.net/zj52hm/article/details/51980194 http://blog.csdn.net/wuli ...