4. 启用热重载(hot reload)调试(helloworld of vue + electron)

启用热重载(hot reload)调试

使用webpack-dev-server实现

接上一篇:
3. 恢复默认vue目录(helloworld of vue + electron)

每次要调试项目时，打包启动总是要花不少时间，有时只是很小的一次改动,要确认更改后的效果就不得不重新启动程序，这样效率太慢了，不是我们想要的。

“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改.vue 文件时，该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提高了开发体验。

参考文档 热重载 https://vue-loader.vuejs.org/zh/guide/hot-reload.html
文档详细的描述了用法和关闭的方法

安装 webpack-dev-server

我们按文档上的，使用webpack-dev-server来实现热重载

cnpm install webpack-dev-server --save-dev

我们先打包目标文件生成到dist目录

cnpm run pack:dev

启动webpack-dev-server

.\node_modules\.bin\webpack-dev-server --hot

提示出错了

ERROR in Entry module not found: Error: Can't resolve './src'

因为少了webpack配置，加上默认的配置文件路径

.\node_modules\.bin\webpack-dev-server --hot --config .\node_modules\@vue\cli-service\webpack.config.js

运行成功，打开浏览器访问http://localhost:8080/， 试着修改下App.vue, 发现页面也跟着改了。

webpack-dev-server 与 electron 同时启动

接下来只要启动electron 访问http://localhost:8080 就达到我们的目的了， 我们修改一下src/electron/index.js

diff --git a/src/electron/index.js b/src/electron/index.js
index c1f2c90..763d012 100644
--- a/src/electron/index.js
+++ b/src/electron/index.js
@@ -12,11 +12,13 @@ function createWindow () {
     }
   })

-  mainWindow.loadURL(`file://${__dirname}/index.html`)

   // 打开开发者工具
   if (process.env.NODE_ENV === 'development') {
     mainWindow.webContents.openDevTools()
+    mainWindow.loadURL(`http://localhost:8080`)
+  } else {
+    mainWindow.loadURL(`file://${__dirname}/index.html`)
   }

   mainWindow.on('closed', () => {

那我们如何使用一条npm script 来同时启动webpack-dev-server和electron呢？
尝试命令

.\node_modules\.bin\webpack-dev-server --hot --config .\node_modules\@vue\cli-service\webpack.config.js && electron .

失败了，electron 并没有启动，因为webpack-dev-server启动后, 已经阻塞了，并没有执行后面的命令, 尝试把&&换成&也是不行的
那就写个脚本dev-startup.js同时来启动webpack-dev-server和electron了，脚本放在helloworld目录下
dev-startup.js:

'use strict'
const electron = require('electron')
const { spawn } = require('child_process')
const Webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const webpackConfig = require('@vue/cli-service/webpack.config')
const electronConfig = require('./webpack.electron.config')

function startElectron () {
  electronConfig.mode = 'development'
  Webpack(electronConfig).watch({
    aggregateTimeout: 1000
  }, (err, stats) => {
    if (err) {
      console.log(err)
      return
    }
  })
  let electronProcess = spawn(electron, ['.'])
  electronProcess.on('close', () => {
    process.exit()
  })
}

function startServer () {
  webpackConfig.mode = 'development'
  const compiler = Webpack(webpackConfig)
  const devServerOptions = Object.assign({}, webpackConfig.devServer, {
    open: false,
    quiet: true,
    stats: {
      colors: true
    }
  })
  const server = new WebpackDevServer(compiler, devServerOptions)
  server.listen(8080, () => {
    console.log('\nStarting server on http://localhost:8080\n')
  })
}

function devStartup () {
  startServer()
  startElectron()
}
devStartup()

修改package.json

运行 node dev-startup.js, 启动成功了。最后我们再修改一下package.json里的scripts, 尽量简化一下

   "version": "0.1.0",
   "private": false,
   "scripts": {
-    "serve": "npm run debug",
+    "serve": "npm run pack && electron .",
     "build": "npm run pack && electron-builder",
-    "debug": "npm run pack:dev && electron .",
-    "pack": "vue-cli-service build && webpack-cli --config webpack.electron.config.js",
-    "pack:dev": "vue-cli-service build --mode development && webpack-cli --mode development --config webpack.electron.config.js"
+    "dev": "node dev-startup.js",
+    "pack": "vue-cli-service build && webpack-cli --config webpack.electron.config.js"
   },
   "main": "dist/index.js",

这阶段就暂时完成了。

项目地址https://github.com/nononoone/helloworld