diff --git a/template/build/dev-client.js b/template/build/dev-client.js
deleted file mode 100644
index ea35821..0000000
--- a/template/build/dev-client.js
+++ /dev/null
@@ -1,11 +0,0 @@
-'use strict'
-
-/* eslint-disable */
-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 3c94166..0000000
--- a/template/build/dev-server.js
+++ /dev/null
@@ -1,93 +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'
-  ? 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
-})
-// force page reload when html-webpack-plugin template changes
-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
-
-let _resolve
-const readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-const server = app.listen(port)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}
diff --git a/template/build/logo.png b/template/build/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/template/build/logo.png differ
diff --git a/template/build/utils.js b/template/build/utils.js
index 7f8a086..c398b18 100644
--- a/template/build/utils.js
+++ b/template/build/utils.js
@@ -3,6 +3,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'
@@ -71,3 +72,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 355d43d..517fb36 100644
--- a/template/build/webpack.base.conf.js
+++ b/template/build/webpack.base.conf.js
@@ -32,15 +32,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 2035ec0..d21e086 100644
--- a/template/build/webpack.dev.conf.js
+++ b/template/build/webpack.dev.conf.js
@@ -9,24 +9,39 @@ 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: {
+    clientLogLevel: 'warning',
+    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,
+    },
+    historyApiFallback: true
+  },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': config.dev.env
+      'process.env': require('../config/dev.env')
     }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     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({
@@ -39,3 +54,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 5797418..c896740 100644
--- a/template/build/webpack.prod.conf.js
+++ b/template/build/webpack.prod.conf.js
@@ -16,7 +16,7 @@ const loadMinified = require('./load-minified')
 
 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, {
   module: {
diff --git a/template/config/index.js b/template/config/index.js
index d67c345..06fdcfe 100644
--- a/template/config/index.js
+++ b/template/config/index.js
@@ -4,37 +4,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, '../dist/index.html'),
+
+    // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     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: 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 6518f71..287c956 100644
--- a/template/package.json
+++ b/template/package.json
@@ -5,8 +5,8 @@
   "author": "{{ author }}",
   "private": true,
   "scripts": {
-    "dev": "node build/dev-server.js",
-    "start": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "build": "node build/build.js"{{#unit}},
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
     "e2e": "node test/e2e/runner.js"{{/e2e}}{{#if_or unit e2e}},
@@ -30,7 +30,6 @@
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "chalk": "^2.1.0",
-    "connect-history-api-fallback": "^1.4.0",
     "copy-webpack-plugin": "^4.1.1",
     "css-loader": "^0.28.7",
     "cssnano": "^3.10.0",
@@ -52,12 +51,10 @@
     {{/if_eq}}
     {{/lint}}
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.16.2",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.5",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "http-proxy-middleware": "^0.17.4",
     "webpack-bundle-analyzer": "^2.9.0",
     {{#unit}}
     "cross-env": "^5.0.5",
@@ -78,6 +75,7 @@
     "babel-plugin-istanbul": "^4.1.5",
     "phantomjs-prebuilt": "^2.1.15",
     {{/unit}}
+    "node-notifier": "^5.1.2",
     {{#e2e}}
     "chromedriver": "^2.33.1",
     "cross-spawn": "^5.1.0",
@@ -86,7 +84,6 @@
     {{/e2e}}
     "semver": "^5.4.1",
     "shelljs": "^0.7.8",
-    "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.3.0",
     "rimraf": "^2.6.2",
@@ -95,8 +92,7 @@
     "vue-style-loader": "^3.0.3",
     "vue-template-compiler": "^2.5.2",
     "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",
     "uglify-es": "^3.1.3"
   },
diff --git a/template/test/e2e/runner.js b/template/test/e2e/runner.js
index 6b30c61..de22bfd 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}}