启用热重载(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",
这阶段就暂时完成了。
