Merge pull request #119 from smiclea/webpack-log

Refactor and improve webpack logging

package.json

@@ -89,6 +89,7 @@
     "url-loader": "^0.6.2",
     "webpack": "^3.6.0",
     "webpack-blocks-happypack": "^0.1.3",
-    "webpack-blocks-split-vendor": "^0.2.1"
+    "webpack-blocks-split-vendor": "^0.2.1",
+    "webpack-logging-plugin": "^0.1.2"
   }
 }

private/storybook/webpack.config.js

@@ -8,4 +8,5 @@ module.exports = storybookBaseConfig =>
     module: Object.assign({}, storybookBaseConfig.module, {
       rules: storybookBaseConfig.module.rules.concat(baseConfig.module.rules.slice(1)),
     }),
+    node: baseConfig.node,
   })

server/dev.js

@@ -16,34 +16,18 @@ import webpack from 'webpack'
 import webpackConfig from '../webpack.config'
 
 module.exports = (app, PORT) => {
-  let isBrowserOpen = false
+  let isFirstTimeSuccess = false
   const compiler = webpack(webpackConfig)
 
   app.use(require('webpack-dev-middleware')(compiler, {
     noInfo: false,
     publicPath: webpackConfig.output.publicPath,
-    stats: {
-      colors: true,
-    },
+    stats: 'errors-only',
     log: text => {
-      let statusIndex = text.indexOf('webpack: Compiled') > -1
-        ? text.indexOf('webpack: Compiled') : text.indexOf('webpack: Failed')
-      if (statusIndex > -1) {
-        let left = text.substr(0, statusIndex)
-        let isSuccesfull = text.indexOf('webpack: Compiled successfully.') > -1
-        let color = text.indexOf('webpack: Compiled with warnings.') > -1 ? '\x1b[43m\x1b[30m' : ''
-        color = isSuccesfull ? '\x1b[42m\x1b[30m' : color
-        color = text.indexOf('webpack: Failed to compile.') > -1 ? '\x1b[41m' : color
-
-        let end = `${color + text.substr(statusIndex)}\x1b[0m`
-        console.log(left + end) // eslint-disable-line no-console
-
-        if (!isBrowserOpen && isSuccesfull) {
-          isBrowserOpen = true
-          console.log(`\x1b[96mServer is available at http://localhost:${PORT}\x1b[0m`) // eslint-disable-line no-console
-        }
-      } else {
-        console.log(text)// eslint-disable-line no-console
+      let isSuccessfull = text.indexOf('webpack: Compiled successfully.') > -1
+      if (!isFirstTimeSuccess && isSuccessfull) {
+        isFirstTimeSuccess = true
+        console.log(`\x1b[36mServer is available at http://localhost:${PORT}\x1b[0m`) // eslint-disable-line no-console
       }
     },
   }))

webpack.config.js

@@ -16,6 +16,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const splitVendor = require('webpack-blocks-split-vendor')
 const happypack = require('webpack-blocks-happypack')
+const WebpackLoggingPlugin = require('webpack-logging-plugin')
 
 const {
   addPlugins, createConfig, entryPoint, env, setOutput,
@@ -56,6 +57,15 @@ const resolveModules = modules => () => ({
   },
 })
 
+const node = () => () => ({
+  node: {
+    console: true,
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+})
+
 const config = createConfig([
   setOutput({
     filename: '[name].js',
@@ -66,18 +76,20 @@ const config = createConfig([
     'process.env.NODE_ENV': process.env.NODE_ENV,
     'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, ''),
   }),
+  () => ({ stats: 'errors-only' }),
   addPlugins([
-    new webpack.ProgressPlugin(),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.join(process.cwd(), 'public/index.html'),
     }),
+    new WebpackLoggingPlugin(),
   ]),
   happypack([
     babel(),
   ]),
   assets(),
   resolveModules(sourceDir),
+  node(),
 
   env('development', [
     entryPoint({

yarn.lock

@@ -2032,7 +2032,11 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.11.x, commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
+commander@2.12.x, commander@~2.12.1:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
+commander@^2.11.0, commander@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
@@ -2605,6 +2609,10 @@ electron-to-chromium@^1.3.27:
   version "1.3.27"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d"
 
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -3659,17 +3667,17 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.5.tgz#3bdc9427e638bbe3dbde96c0eb988b044f02739e"
+  version "3.5.8"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.1.x"
-    commander "2.11.x"
+    commander "2.12.x"
     he "1.1.x"
     ncname "1.0.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "3.1.x"
+    uglify-js "3.3.x"
 
 html-tag-names@^1.1.1:
   version "1.1.2"
@@ -7083,12 +7091,12 @@ ua-parser-js@^0.7.9:
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
-uglify-js@3.1.x:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.3.tgz#d61f0453b4718cab01581f3162aa90bab7520b42"
+uglify-js@3.3.x:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.4.tgz#d8ebb76f201a3798ac2f0b6519642fcca4a99834"
   dependencies:
-    commander "~2.11.0"
-    source-map "~0.5.1"
+    commander "~2.12.1"
+    source-map "~0.6.1"
 
 uglify-js@^2.6, uglify-js@^2.8.27, uglify-js@^2.8.29:
   version "2.8.29"
@@ -7317,6 +7325,14 @@ webpack-hot-middleware@^2.20.0:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
+webpack-logging-plugin@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-logging-plugin/-/webpack-logging-plugin-0.1.2.tgz#6f7bcb93d3a01fac070d9e98b12ead30f2d46237"
+  dependencies:
+    chalk "^1.1.3"
+    elegant-spinner "^1.0.1"
+    lodash "^4.17.4"
+
 webpack-md5-hash@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/webpack-md5-hash/-/webpack-md5-hash-0.0.5.tgz#d9f1899ead664459dd8b6b0c926ac71cfbd7bc7a"