前一篇文章說了說怎樣使用 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 即可啟動打包好的可執行程序。


分享