fix: webpack errors message

doczjs · Apr 19, 2018 · 90f6064 · 90f6064
1 parent c337c04
commit 90f6064
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 19 deletions.
diff --git a/packages/docz-bundler-webpack/package.json b/packages/docz-bundler-webpack/package.json
@@ -29,6 +29,7 @@
     "docz-core": "^0.0.1",
     "express": "^4.16.3",
     "file-loader": "^1.1.11",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
     "load-cfg": "^0.0.1",
     "react-dev-utils": "^5.0.1",

diff --git a/packages/docz-bundler-webpack/src/config.ts b/packages/docz-bundler-webpack/src/config.ts
@@ -3,10 +3,11 @@ import * as webpack from 'webpack'
 import { Configuration } from 'webpack'
 import { ConfigArgs } from 'docz-core'
 import { load } from 'load-cfg'
+import merge from 'deepmerge'
 import Webpackbar from 'webpackbar'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
 import Config from 'webpack-chain'
-import merge from 'deepmerge'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import friendlyErrors from 'friendly-errors-webpack-plugin'
 
 const INLINE_LIMIT = 10000
 
@@ -183,15 +184,18 @@ export const createConfig = (args: ConfigArgs) => (): Configuration => {
         template: paths.indexHtml,
       }])
 
-  config.when(!debug, cfg =>
+  config.when(!debug, cfg =>{
     cfg
       .plugin('webpackbar')
       .use(Webpackbar, [{
         color: '#41b883',
         compiledIn: false,
         name: 'Client',
       }])
-  )
+    cfg
+      .plugin('friendly-errors')
+      .use(friendlyErrors)
+  })
 
   return config.toConfig()
 }
diff --git a/packages/docz-bundler-webpack/src/devserver.ts b/packages/docz-bundler-webpack/src/devserver.ts
@@ -2,23 +2,28 @@ import { ConfigArgs } from 'docz-core'
 import { Application } from 'express'
 import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
 
-export const devServerConfig = ({ paths, host, protocol }: ConfigArgs) => ({
+export const devServerConfig = ({
+  paths,
+  host,
+  debug,
+  protocol,
+}: ConfigArgs) => ({
   host,
   before(app: Application): void {
-    app.use(errorOverlayMiddleware())
+    !debug && app.use(errorOverlayMiddleware())
   },
-  clientLogLevel: 'none',
+  clientLogLevel: !debug ? 'none' : 'error',
   compress: true,
   contentBase: paths.docz,
   historyApiFallback: {
     disableDotRule: true,
   },
   hot: true,
   https: protocol === 'https',
-  noInfo: true,
+  noInfo: !debug,
   overlay: false,
   publicPath: '/',
-  quiet: true,
+  quiet: !debug,
   stats: {
     chunkModules: false,
     chunks: false,

diff --git a/packages/docz-bundler-webpack/src/index.ts b/packages/docz-bundler-webpack/src/index.ts
@@ -1,20 +1,13 @@
 import { Configuration } from 'webpack'
 import { ConfigArgs, createBundler, BundlerCreate } from 'docz-core'
-import * as webpack from 'webpack'
 import * as WebpackDevServer from 'webpack-dev-server'
-import WebpackDevServerUtils from 'react-dev-utils/WebpackDevServerUtils'
+import webpack from 'webpack'
 
 import { devServerConfig } from './devserver'
 import { createConfig as config } from './config'
 
-export const compiler = ({ paths, port, host, protocol }: ConfigArgs) => (
-  cfg: Configuration
-) => {
-  const appName = require(paths.packageJson).name
-  const urls = WebpackDevServerUtils.prepareUrls(protocol, host, port)
-
-  return WebpackDevServerUtils.createCompiler(webpack, cfg, appName, urls, true)
-}
+export const compiler = (args: ConfigArgs) => (cfg: Configuration) =>
+  webpack(cfg)
 
 export const server = (cfg: ConfigArgs) => (comp: any): WebpackDevServer =>
   new WebpackDevServer(comp, devServerConfig(cfg))

diff --git a/packages/docz-bundler-webpack/src/types.d.ts b/packages/docz-bundler-webpack/src/types.d.ts
@@ -1,3 +1,4 @@
 declare module 'react-dev-utils/errorOverlayMiddleware'
 declare module 'react-dev-utils/WebpackDevServerUtils'
 declare module 'webpackbar'
+declare module 'friendly-errors-webpack-plugin'