Move logging into plugin, use svgo for svg compression

lib/webpack.config.js

@@ -7,6 +7,7 @@ const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const rimraf = require('rimraf')
 const mkdirp = require('mkdirp')
+const LogPlugin = require('./webpack/log-plugin')
 const getConfig = require('./get-config')
 
 const rimrafAsync = promisify(rimraf)
@@ -36,6 +37,7 @@ module.exports = async function() {
   const port = parsedUrl.port || 8080
   const entry = {}
   const plugins = [
+    new LogPlugin(),
     new webpack.DefinePlugin({
       'process.env': { NODE_ENV: JSON.stringify(env) }
     })
@@ -122,7 +124,28 @@ module.exports = async function() {
           }
         },
         {
-          test: /\.(ttf|woff2?|eot|svg|otf)$/,
+          test: /\.svg$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: 'svg/[name].[ext]'
+              }
+            },
+            {
+              loader: 'svgo-loader',
+              options: {
+                plugins: [
+                  { removeTitle: true },
+                  { removeUselessDefs: false },
+                  { convertPathData: false }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(ttf|woff2?|eot|otf)$/,
           loader: 'file-loader',
           options: {
             name: 'fonts/[name].[ext]'

lib/webpack/log-plugin.js

@@ -0,0 +1,79 @@
+const readline = require('readline')
+const formatMessages = require('webpack-format-messages')
+const chalk = require('chalk')
+const clearScreen = require('brighten')
+
+function getCompileTime(stats) {
+  if (isMultiStats(stats)) {
+    // Webpack multi compilations run in parallel so using the longest duration.
+    // https://webpack.github.io/docs/configuration.html#multiple-configurations
+    return stats.stats.reduce(
+      (time, stats) => Math.max(time, getCompileTime(stats)),
+      0
+    )
+  }
+  return stats.endTime - stats.startTime
+}
+
+function isMultiStats(stats) {
+  return stats.stats
+}
+
+function displayTook(stats) {
+  const time = getCompileTime(stats)
+
+  if (time > 1000) {
+    return time / 1000 + 's'
+  }
+
+  return time + 'ms'
+}
+
+module.exports = class {
+  apply(compiler) {
+    clearScreen()
+
+    let first = true
+
+    compiler.plugin('invalid', () => {
+      clearScreen()
+      console.log(chalk.yellow('Compiling...'))
+    })
+
+    compiler.plugin('done', stats => {
+      if (first) {
+        // Leave the first line showing the webserver address
+        readline.cursorTo(process.stdout, 0, 1)
+        readline.clearScreenDown(process.stdout)
+      } else {
+        // Whipe the screen including contents
+        readline.cursorTo(process.stdout, 0, 0)
+        readline.clearScreenDown(process.stdout)
+      }
+
+      const messages = formatMessages(stats)
+
+      if (messages.errors.length === 0 && messages.warnings.length === 0) {
+        // Don't clear `Starting server on HOST`
+        console.log(
+          `${chalk.green('Compiled successfully!')} ${chalk.dim(
+            `in ${displayTook(stats)}`
+          )}`
+        )
+      }
+
+      if (messages.errors.length > 0) {
+        console.log(chalk.inverse('Failed to compile.'))
+        messages.errors.forEach(e => console.log(e))
+        return
+      }
+
+      if (messages.warnings.length > 0) {
+        console.log('Compiled with warnings.')
+        messages.warnings.forEach(w => console.log(w))
+      }
+
+      first = false
+    })
+  }
+}

package.json

@@ -46,6 +46,7 @@
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "styled-jsx": "^1.0.10",
+    "svgo-loader": "^1.2.1",
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.6.0",
     "webpack-format-messages": "^1.0.0",