hot-reloader: refactoring

bin/next-dev

@@ -4,8 +4,6 @@ import { resolve, join } from 'path'
 import parseArgs from 'minimist'
 import { exists } from 'mz/fs'
 import Server from '../server'
-import HotReloader from '../server/hot-reloader'
-import webpack from '../server/build/webpack'
 import clean from '../server/build/clean'
 
 const argv = parseArgs(process.argv.slice(2), {
@@ -27,13 +25,9 @@ const open = url => {
 
 const dir = resolve(argv._[0] || '.')
 
-Promise.all([
-  webpack(dir, { hotReload: true }),
-  clean(dir)
-])
-.then(async ([compiler]) => {
-  const hotReloader = new HotReloader(compiler)
-  const srv = new Server({ dir, dev: true, hotReloader })
+clean(dir)
+.then(async () => {
+  const srv = new Server({ dir, dev: true, hotReload: true })
   await srv.start(argv.port)
   console.log('> Ready on http://localhost:%d', argv.port)
 

server/hot-reloader.js

@@ -1,14 +1,21 @@
 import WebpackDevServer from 'webpack-dev-server'
+import webpack from './build/webpack'
 import read from './read'
 
 export default class HotReloader {
-  constructor (compiler) {
-    this.server = new WebpackDevServer(compiler, {
-      publicPath: '/',
-      hot: true,
-      noInfo: true,
-      clientLogLevel: 'warning'
-    })
+  constructor (dir) {
+    this.dir = dir
+    this.server = null
+  }
+
+  async start () {
+    await this.prepareServer()
+    await this.waitBuild()
+    await this.listen()
+  }
+
+  async prepareServer () {
+    const compiler = await webpack(this.dir, { hotReload: true })
 
     compiler.plugin('after-emit', (compilation, callback) => {
       const { assets } = compilation
@@ -20,11 +27,13 @@ export default class HotReloader {
       }
       callback()
     })
-  }
 
-  async start () {
-    await this.waitBuild()
-    await this.listen()
+    this.server = new WebpackDevServer(compiler, {
+      publicPath: '/',
+      hot: true,
+      noInfo: true,
+      clientLogLevel: 'warning'
+    })
   }
 
   async waitBuild () {

server/index.js

@@ -3,12 +3,13 @@ import { resolve } from 'path'
 import send from 'send'
 import Router from './router'
 import { render, renderJSON } from './render'
+import HotReloader from './hot-reloader'
 
 export default class Server {
-  constructor ({ dir = '.', dev = false, hotReloader }) {
+  constructor ({ dir = '.', dev = false, hotReload = false }) {
     this.dir = resolve(dir)
     this.dev = dev
-    this.hotReloader = hotReloader
+    this.hotReloader = hotReload ? new HotReloader(this.dir) : null
     this.router = new Router()
 
     this.http = http.createServer((req, res) => {