diff --git a/.gitignore b/.gitignore
index 80c45fbf35..38e1975447 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 docs/_book
+test/
diff --git a/template/build/dev-client.js b/template/build/dev-client.js
deleted file mode 100644
index 2f75dd531f..0000000000
--- a/template/build/dev-client.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable */
-'use strict'
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})
diff --git a/template/build/dev-server.js b/template/build/dev-server.js
deleted file mode 100644
index 00d9efd144..0000000000
--- a/template/build/dev-server.js
+++ /dev/null
@@ -1,107 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-const config = require('../config')
-if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-const opn = require('opn')
-const path = require('path')
-const express = require('express')
-const webpack = require('webpack')
-const proxyMiddleware = require('http-proxy-middleware')
-const webpackConfig = {{#if_or unit e2e}}(process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production')
-  ? require('./webpack.prod.conf')
-  : {{/if_or}}require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-const port = process.env.PORT || config.dev.port
-// automatically open browser, if not set will be false
-const autoOpenBrowser = !!config.dev.autoOpenBrowser
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-const proxyTable = config.dev.proxyTable
-
-const app = express()
-const compiler = webpack(webpackConfig)
-
-const devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
-})
-
-const hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: false,
-  heartbeat: 2000
-})
-// force page reload when html-webpack-plugin template changes
-// currently disabled until this is resolved:
-// https://github.com/jantimon/html-webpack-plugin/issues/680
-// compiler.plugin('compilation', function (compilation) {
-//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-//     hotMiddleware.publish({ action: 'reload' })
-//     cb()
-//   })
-// })
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  let options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// serve pure static assets
-const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-const uri = 'http://localhost:' + port
-
-var _resolve
-var _reject
-var readyPromise = new Promise((resolve, reject) => {
-  _resolve = resolve
-  _reject = reject
-})
-
-var server
-var portfinder = require('portfinder')
-portfinder.basePort = port
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  portfinder.getPort((err, port) => {
-    if (err) {
-      _reject(err)
-    }
-    process.env.PORT = port
-    var uri = 'http://localhost:' + port
-    console.log('> Listening at ' + uri + '\n')
-    // when env is testing, don't need open it
-    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-      opn(uri)
-    }
-    server = app.listen(port)
-    _resolve()
-  })
-})
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}
diff --git a/template/build/logo.png b/template/build/logo.png
new file mode 100644
index 0000000000..f3d2503fc2
Binary files /dev/null and b/template/build/logo.png differ
diff --git a/template/build/utils.js b/template/build/utils.js
index 4ac71cb2c9..b75c21502f 100644
--- a/template/build/utils.js
+++ b/template/build/utils.js
@@ -2,6 +2,7 @@
 const path = require('path')
 const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const pkg = require('../package.json')
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -70,3 +71,22 @@ exports.styleLoaders = function (options) {
   }
   return output
 }
+
+exports.createNotifierCallback = function () {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') {
+      return
+    }
+    const error = errors[0]
+
+    const filename = error.file.split('!').pop()
+    notifier.notify({
+      title: pkg.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}
diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js
index fd1697d036..5ff43f221c 100644
--- a/template/build/webpack.base.conf.js
+++ b/template/build/webpack.base.conf.js
@@ -31,15 +31,16 @@ module.exports = {
   module: {
     rules: [
       {{#lint}}
-      {
+      ...(config.dev.useEslint? [{
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
         include: [resolve('src'), resolve('test')],
         options: {
-          formatter: require('eslint-friendly-formatter')
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: !config.dev.showEslintErrorsInOverlay
         }
-      },
+      }] : []),
       {{/lint}}
       {
         test: /\.vue$/,
diff --git a/template/build/webpack.dev.conf.js b/template/build/webpack.dev.conf.js
index 6f25d63458..9b2429a5e1 100644
--- a/template/build/webpack.dev.conf.js
+++ b/template/build/webpack.dev.conf.js
@@ -6,24 +6,38 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
 
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-module.exports = merge(baseWebpackConfig, {
+const devWebpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: '#cheap-module-eval-source-map',
+  
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    hot: true,
+    host: process.env.HOST || config.dev.host,
+    port: process.env.PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay ? {
+      warnings: false,
+      errors: true,
+    } : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+      'process.env': require('../config/dev.env')
+    }), 
     new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
     new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
@@ -34,3 +48,29 @@ module.exports = merge(baseWebpackConfig, {
     new FriendlyErrorsPlugin()
   ]
 })
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${config.dev.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js
index a8be9b2883..19ad2fb396 100644
--- a/template/build/webpack.prod.conf.js
+++ b/template/build/webpack.prod.conf.js
@@ -12,7 +12,7 @@ const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
 const env = {{#if_or unit e2e}}process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
-  : {{/if_or}}config.build.env
+  : {{/if_or}}require('../config/prod.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
   watch: process.env.WEBPACK_WATCH === 'true',
diff --git a/template/config/index.js b/template/config/index.js
index 189a787e6d..aab2f71ade 100644
--- a/template/config/index.js
+++ b/template/config/index.js
@@ -5,37 +5,58 @@
 const path = require('path')
 
 module.exports = {
+  dev: {
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  },
   build: {
-    env: require('./prod.env'),
+    // Template for index.html
     index: path.resolve(__dirname, '../www/index.html'),
+
+    // Paths
     assetsRoot: path.resolve(__dirname, '../www'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '',
+
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
+
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
+
     bundleAnalyzerReport: process.env.npm_config_report
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: process.env.PORT || 8080,
-    autoOpenBrowser: true,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
   }
 }
diff --git a/template/package.json b/template/package.json
index 15809637b2..5adb7e6d3d 100644
--- a/template/package.json
+++ b/template/package.json
@@ -5,7 +5,7 @@
   "author": "{{ author }}",
   "private": true,
   "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "build": "node build/build.js",
     "build:watch": "cross-env WEBPACK_WATCH=true node build/build.js"{{#unit}},
@@ -32,7 +32,6 @@
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
-    "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.1",
     "css-loader": "^0.28.0",
@@ -55,12 +54,10 @@
     {{/if_eq}}
     {{/lint}}
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "http-proxy-middleware": "^0.17.3",
     "webpack-bundle-analyzer": "^2.9.0",
     {{#unit}}
     "karma": "^1.4.1",
@@ -78,6 +75,7 @@
     "inject-loader": "^3.0.0",
     "babel-plugin-istanbul": "^4.1.1",
     {{/unit}}
+    "node-notifier": "^5.1.2",
     {{#e2e}}
     "chromedriver": "^2.27.2",
     "cross-spawn": "^5.0.1",
@@ -86,7 +84,6 @@
     {{/e2e}}
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
@@ -96,8 +93,7 @@
     "vue-template-compiler": "^2.5.0",
     "portfinder": "^1.0.13",
     "webpack": "^3.7.1",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.19.1",
+    "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"
   },
   "engines": {
diff --git a/template/test/e2e/runner.js b/template/test/e2e/runner.js
index 6b30c61e17..de22bfda22 100644
--- a/template/test/e2e/runner.js
+++ b/template/test/e2e/runner.js
@@ -1,8 +1,23 @@
 // 1. start the dev server using production config
 process.env.NODE_ENV = 'testing'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-var server = require('../../build/dev-server.js'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
-server.ready.then(() => {
+const webpack = require('webpack'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+const DevServer = require('webpack-dev-server'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+
+const webpackConfig = require('../../build/webpack.prod.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+const devConfigPromise = require('../../build/webpack.dev.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+
+let server{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  const compiler = webpack(webpackConfig){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  server = new DevServer(compiler, devServerOptions){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  const port = devServerOptions.port{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  const host = devServerOptions.host{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  return server.listen(port, host){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+})
+.then(() => {
   // 2. run the nightwatch test suite against it
   // to run in additional browsers:
   //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
@@ -10,7 +25,7 @@ server.ready.then(() => {
   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
   // For more information on Nightwatch's config file, see
   // http://nightwatchjs.org/guide#settings-file
-  var opts = process.argv.slice(2){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  let opts = process.argv.slice(2){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
   if (opts.indexOf('--config') === -1) {
     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
   }
@@ -18,8 +33,8 @@ server.ready.then(() => {
     opts = opts.concat(['--env', 'chrome']){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
   }
 
-  var spawn = require('cross-spawn'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-  var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  const spawn = require('cross-spawn'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
   runner.on('exit', function (code) {
     server.close(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}