Merge pull request #1469 from h3poteto/fix/hot-reload

Fix hotcode reload for new html-webpack-plugin

.electron-vue/dev-runner.js

@@ -16,19 +16,22 @@ let electronProcess = null
 let manualRestart = false
 let hotMiddleware
 
-function logStats (proc, data) {
+function logStats(proc, data) {
   let log = ''
 
-  log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
+  log += chalk.yellow.bold(`┏ ${proc} Process ${new Array(19 - proc.length + 1).join('-')}`)
   log += '\n\n'
 
   if (typeof data === 'object') {
-    data.toString({
+    data
-      colors: true,
+      .toString({
-      chunks: false
+        colors: true,
-    }).split(/\r?\n/).forEach(line => {
+        chunks: false
-      log += '  ' + line + '\n'
+      })
-    })
+      .split(/\r?\n/)
+      .forEach(line => {
+        log += '  ' + line + '\n'
+      })
   } else {
     log += `  ${data}\n`
   }
@@ -38,7 +41,7 @@ function logStats (proc, data) {
   console.log(log)
 }
 
-function startRenderer () {
+function startRenderer() {
   return new Promise((resolve, reject) => {
     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
     rendererConfig.mode = 'development'
@@ -49,7 +52,8 @@ function startRenderer () {
     })
 
     compiler.hooks.compilation.tap('compilation', compilation => {
-      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
+      const HtmlWebpackPlugin = require('html-webpack-plugin')
+      HtmlWebpackPlugin.getHooks(compilation).afterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
         hotMiddleware.publish({ action: 'reload' })
         cb()
       })
@@ -59,25 +63,22 @@ function startRenderer () {
       logStats('Renderer', stats)
     })
 
-    const server = new WebpackDevServer(
+    const server = new WebpackDevServer(compiler, {
-      compiler,
+      contentBase: path.join(__dirname, '../'),
-      {
+      quiet: true,
-        contentBase: path.join(__dirname, '../'),
+      before(app, ctx) {
-        quiet: true,
+        app.use(hotMiddleware)
-        before (app, ctx) {
+        ctx.middleware.waitUntilValid(() => {
-          app.use(hotMiddleware)
+          resolve()
-          ctx.middleware.waitUntilValid(() => {
+        })
-            resolve()
-          })
-        }
       }
-    )
+    })
 
     server.listen(9080)
   })
 }
 
-function startMain () {
+function startMain() {
   return new Promise((resolve, reject) => {
     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.ts')].concat(mainConfig.entry.main)
     mainConfig.mode = 'development'
@@ -113,7 +114,7 @@ function startMain () {
   })
 }
 
-function startElectron () {
+function startElectron() {
   electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')])
 
   electronProcess.stdout.on('data', data => {
@@ -127,11 +128,8 @@ function startElectron () {
     if (!manualRestart) process.exit()
   })
 }
-function startElectron () {
+function startElectron() {
-  var args = [
+  var args = ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')]
-    '--inspect=5858',
-    path.join(__dirname, '../dist/electron/main.js')
-  ]
 
   // detect yarn or npm and process commandline args accordingly
   if (process.env.npm_execpath.endsWith('yarn.js')) {
@@ -154,7 +152,7 @@ function startElectron () {
   })
 }
 
-function electronLog (data, color) {
+function electronLog(data, color) {
   let log = ''
   data = data.toString().split(/\r?\n/)
   data.forEach(line => {
@@ -162,16 +160,12 @@ function electronLog (data, color) {
   })
   if (/[0-9A-z]+/.test(log)) {
     console.log(
-      chalk[color].bold('┏ Electron -------------------') +
+      chalk[color].bold('┏ Electron -------------------') + '\n\n' + log + chalk[color].bold('┗ ----------------------------') + '\n'
-      '\n\n' +
-      log +
-      chalk[color].bold('┗ ----------------------------') +
-      '\n'
     )
   }
 }
 
-function greeting () {
+function greeting() {
   const cols = process.stdout.columns
   let text = ''
 
@@ -189,7 +183,7 @@ function greeting () {
   console.log(chalk.blue('  getting ready...') + '\n')
 }
 
-function init () {
+function init() {
   greeting()
 
   Promise.all([startRenderer(), startMain()])