feat(webpack): add better log output

lib/dev.js

@@ -12,6 +12,7 @@ const serveStatic = require('koa-static');
 const history = require('connect-history-api-fallback');
 const load = require('./loader');
 const createDevConfig = require('./webpack/dev');
+const logPlugin = require('./webpack/plugin/log')
 
 module.exports = async function dev(sourceDir, cliOptions = {}) {
   const logger = ora(chalk.blue('Start development server')).start();
@@ -19,21 +20,11 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
   // load site props from preprocessed files in source directory
   const props = await load(sourceDir);
 
-  // Reload for any add/remove of file
+  // Reload for any add/change/remove of file
   const reload = () => {
-    const reloadLogger = ora({
+    load(sourceDir).catch(err => {
-      color: 'green',
+      console.error(chalk.red(err.stack));
-      text: chalk.green('Reloading files')
+    });
-    }).start();
-    load(sourceDir)
-      .then(() => {
-        setTimeout(() => {
-          reloadLogger.stop();
-        }, 1000);
-      })
-      .catch(err => {
-        console.error(chalk.red(err.stack));
-      });
   };
   const fsWatcher = chokidar.watch(['**/*.md'], {
     cwd: sourceDir,
@@ -48,20 +39,31 @@ module.exports = async function dev(sourceDir, cliOptions = {}) {
   // resolve webpack config
   let config = createDevConfig(props);
 
+  const port = cliOptions.port || 8080;
+
+  config
+  .plugin('blogi-log')
+  .use(logPlugin, [{
+    port,
+    publicPath: props.publicPath
+  }]);
+
   // create compiler from generated webpack config
   config = config.toConfig();
   const compiler = webpack(config);
   logger.succeed();
 
   // webpack-serve
-  const serveContentDir = path.resolve(__dirname, 'serveContent');
-  const port = cliOptions.port || 8080;
   await serve(
     {},
     {
-      content: [serveContentDir],
+      content: [path.resolve(__dirname, 'serveContent')],
       compiler,
-      devWare: {logLevel: 'warn'},
+      open: true,
+      devMiddleware: {
+        logLevel: 'warn',
+        publicPath: props.publicPath
+      },
       hotClient: {
         port: port + 1,
         logLevel: 'error'

lib/webpack/plugin/log.js

@@ -0,0 +1,29 @@
+const chalk = require('chalk');
+const ora = require('ora');
+module.exports = class LogPlugin {
+  constructor (options) {
+    this.options = options
+  }
+
+  apply (compiler) {
+    const logger = ora();
+    let isFirst = true
+    compiler.hooks.done.tap('blogi-log', stats => {
+      clearScreen()
+
+      const { port, publicPath } = this.options
+      const time = new Date().toTimeString().match(/^[\d:]+/)[0]
+
+      logger.succeed(`${chalk.gray(`[${time}]`)} Build ${chalk.yellow(stats.hash.slice(0, 6))} finished in ${chalk.green(stats.endTime - stats.startTime)} ms!`)
+      if (isFirst) {
+        isFirst = false
+        console.log(`\n${chalk.gray('>')} Blogi dev server listening at ${chalk.cyan(`http://localhost:${port}${publicPath}`)}`)
+      }
+    })
+    compiler.hooks.invalid.tap('blogi-log', clearScreen)
+  }
+}
+
+function clearScreen () {
+  process.stdout.write('\x1Bc')
+}