Web培训课程之Webpack+Electron+React小记

看惯了网上各种全家桶，各种X+Y+Z，今天我也来凑凑热闹，和大家一起聊一聊如何使用Webpack打包基于Electron+React开发的跨平台桌面应用。

Electron是一个结合Node.js和Chromium实现的跨平台桌面应用解决方案，提供了操作系统访问Api，并赋予普通HTML网页访问Node.js本地模块的能力。使得掌握传统HTML、CSS和JS等技术的前端开发工程师，可以轻松的开发本地桌面应用。由于Electron基于Node.js，而Node.js本身具备跨平台特性，因此基于Electron开发的桌面应用程序也具备很好的跨平台能力，可以很好的适配Windows、MacOS和Linux等操作系统。

Electron除了支持几乎全部的Node.js功能，还提供很多内置模块，这些模块大致可以分为三类：仅供主进程使用的主进程模块(如：app，ipcMain等)、仅供渲染进程使用的渲染进程模块(如：ipcRenderer等)，以及可以同时供主进程和渲染进程引用的模块，我称之为公共模块(如：clipboard等)。

一个Electron应用的入口文件通常被命名为main.js，主要负责整个应用的生命周期管理，以及主进程任务的分发等。

123456789101112131415161718192021

const { app, BrowserWindow } = require('electron');let win;const createWindow = () => { win = new BrowserWindow({width:

800, height: 600}); const indexPageURL = `file://${__dirname}/index.html`;

win.loadURL(indexPageURL); win.on('closed', () => { win = null; });

}app.on('ready', createWindow);app.on('window-all-closed',

() => { if (process.platform !== 'darwin') { app.quit(); }});app.on('activate', () => { if (!win) { createWindow(); }});

我们先来看一个最基础的Electron应用实例：

如前文所述，Electron是使用我们前端开发工程师所熟知的HTML、CSS和JS来开发桌面应用，自然我们就可以使用各种前端框架和打包工具来开发和管理我们的Electron应用，比如接下来即将讲述的Webpack+React。

现如今前端开发越来越趋向于单页应用，很多工具也都提供了打包单页应用的功能，特别是在移动端页面中，单页应用更是盛行。但是在Electron应用中却更适合选择比较传统的多页面模式。因为，在桌面应用中多以窗口的形态存在，每个窗口就对应一个完整的界面，而在Electron中，一个界面就可以对应一个HTML页面。

现在，我们来搭建一个Webpack+React多页面应用。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768

const path = require('path');const htmlPlugin = require('html-webpack-plugin');

const ExtractTextPlugin = require('mini-css-extract-plugin');

const outputPath = path.resolve(__dirname, '../dist');

module.exports = { entry: { index: path.resolve(__dirname, '../app/pages/index.js'), login:

path.resolve(__dirname, '../app/pages/login.js') }, output: { path: outputPath, filename:

'js/[name].js', chunkFilename: 'js/[name].bundle.js' }, module:

{ rules: [{ test: /\.(js|jsx)$/, use: { loader: "babel-loader",

options: { presets: ["es2015", "react", "stage-0"] } }, exclude:

/node_modules/ }, { test: /\.(css|less)$/, use: [ { loader:

ExtractTextPlugin.loader, options: { publicPath: outputPath + '/css' } },

{loader: 'css-loader'}, {loader: 'less-loader'} ] },

{ test: /\.(png|jpe?g|gif)/, use: [{ loader: 'url-loader',

options: { limit: 8192, name: 'images/[name].[ext]', publicPath:

outputPath } }] } ] }, plugins: [ new htmlPlugin({ title: 'Index',

template: 'app/tpl.html', chunks: ['common', 'index'],

chunksSortMode: 'manual', filename: 'index.html' }),

ew htmlPlugin({ title: 'Login', template: 'app/tpl.html',

chunks: ['common', 'login'], chunksSortMode: 'manual', filename: 'login.html' }), 
ew ExtractTextPlugin({ filename: "css/[name].css", chunkFilename: "css/[id].css" }) ]};

简单说明一下，为了使用一些最新的特性，而现在的浏览器内核并没有完全支持这些新特性，因此我们通常需要使用babel-loader来进行转义，让我们的新特性在现在的浏览器中可以正常运行。因此，我们需要安装babel、babel-loader、以及es2015、react以及stage-0等辅助插件。当然，兼容程度可以根据自己的情况设置，设置state-0/1/2/3都可以。

另外，为了更好的编写和维护CSS样式，我们通常会使用LESS、SCSS等预编译语言，而且为了尽量减小前端整体资源大小，通常我们还会对JS、CSS进行压缩，因此我们还需要：less-loader、css-loader、style-loader和mini-css-extract-plugin等插件。

最后就是处理我们在界面布局过程中使用到的图标、图片文件，因此再加上url-loader和file-loader，基本功能就完成了。

接下来，我们再把React和Electron整合起来，一个Webpack+Electron+React的基本应用模型就搭建好了。

首先要做的就是让Webpack打包配置支持Node.js模块，因为Node.js模块不存在于node_modules中，如果直接使用以上配置文件打包，会出现类似报错：

123456

ERROR in ./node_modules/electron/index.jsModule not found: Error:

Can't resolve 'fs' in '/Users/YS/Desktop/webpack-electron/node_modules/electron' @ .

/node_modules/electron/index.js 1:9-22 @ ./app/components/Login/index.js @ ./app/pages/login.js ...

所幸，Webpack早就考虑到了此类问题，并且提供了target配置项，用于指定打包的目标应用类型。比如眼下我们要打包Electron应用，就需要将target设置为electron-renderer。

123

module.exports = { target: 'electron-renderer'};

然后，便是要考虑开发环境与生产环境的区别，为这两种环境设置不同的模式。

最后我们将前面的内容整合起来，便可得出一个基础的Electron应用的开发模板。