diff --git a/.babelrc b/.babelrc
index 41789ca..a4681c3 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"],
   "comments": false
-}
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f153968..9e23386 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@ package-lock.json
 docs/gitbook/_book
 docs/node_modules
 site
-dist
+_book
+dist
\ No newline at end of file
diff --git a/build/build.js b/build/build.js
deleted file mode 100644
index 9ca4c5c..0000000
--- a/build/build.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// https://github.com/shelljs/shelljs
-require('shelljs/global');
-env.NODE_ENV = 'production';
-
-var path = require('path');
-var config = require('../config');
-var ora = require('ora');
-var webpack = require('webpack');
-var utils = require('./utils');
-var webpackConfig = utils.shouldBuildHomepage() ? require('./webpack.site.conf') : require('./webpack.prod.conf');
-
-var text = utils.shouldBuildHomepage() ? 'homepage' : 'vue-select UMD module';
-var spinner = ora(`building ${text}...`);
-spinner.start();
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory);
-if (!utils.shouldBuildHomepage()) {
-  rm('-rf', assetsPath);
-  mkdir('-p', assetsPath);
-}
-
-/**
- * Build the /dist/ folder
- */
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop();
-  if (err) throw err;
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-});
\ No newline at end of file
diff --git a/build/dev-client.js b/build/dev-client.js
deleted file mode 100644
index 18aa1e2..0000000
--- a/build/dev-client.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* 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/build/dev-server.js b/build/dev-server.js
deleted file mode 100644
index b4d8133..0000000
--- a/build/dev-server.js
+++ /dev/null
@@ -1,65 +0,0 @@
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// 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()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  console.log('Listening at http://localhost:' + port + '\n')
-})
diff --git a/build/utils.js b/build/utils.js
deleted file mode 100644
index 7b26e66..0000000
--- a/build/utils.js
+++ /dev/null
@@ -1,83 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-/**
- * Get the path to the assetsSubDirectory
- * @param _path
- * @returns {*|string}
- */
-exports.assetsPath = function (_path) {
-  return path.posix.join(config.build.assetsSubDirectory, _path)
-}
-
-/**
- * Generate loader string to be used with extract text plugin
- * @param options
- * @returns {{css: *, postcss: *, less: *, sass: *, scss: *, stylus: *, styl: *}}
- */
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
-
-    if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
-  }
-}
-
-/**
- * Generate loaders for standalone style files (outside of .vue)
- * @param options
- * @returns {Array}
- */
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      loader: loader
-    })
-  }
-  return output
-}
-
-/**
- * Are we serving the docs or
- * the dev environment?
- * @returns {boolean}
- */
-exports.shouldServeHomepage = function () {
-  return process.argv.indexOf('--docs') > 0
-}
-
-exports.shouldBuildHomepage = function () {
-  return process.argv.indexOf('--homepage') > 0
-}
\ No newline at end of file
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 4ef799b..66acf68 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,34 +1,32 @@
+var webpack = require('webpack')
+var VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+var chokidar = require('chokidar');
+
+const env = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 
 module.exports = {
-  entry: {
-    app: utils.shouldServeHomepage() ? './docs/homepage/home.js' : './dev/dev.js',
-  },
+  mode: env,
   output: {
-    path: config.build.assetsRoot,
-    publicPath: config.build.assetsPublicPath,
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/',
     filename: '[name].js'
   },
+  devtool: env === 'production' ? 'source-map' : 'eval-source-map',
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    extensions: ['.js', '.vue'],
     alias: {
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../docs/assets'),
       'mixins': path.resolve(__dirname, '../src/mixins'),
       'components': path.resolve(__dirname, '../src/components'),
       'docs': path.resolve(__dirname, '../docs'),
-      'vue$': 'vue/dist/vue.common.js',
+      'vue$': 'vue/dist/vue.esm.js'
     }
   },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
-  },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader'
@@ -36,13 +34,23 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: projectRoot,
+        include: path.resolve(__dirname, '../'),
         exclude: /node_modules/
       },
       {
         test: /\.json$/,
         loader: 'json-loader'
       },
+      {
+        test: /\.s?css$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      },
       {
         test: /\.html$/,
         loader: 'vue-html-loader'
@@ -52,7 +60,7 @@ module.exports = {
         loader: 'url',
         query: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: 'img/[name].[hash:7].[ext]'
         }
       },
       {
@@ -60,12 +68,31 @@ module.exports = {
         loader: 'url',
         query: {
           limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: 'fonts/[name].[hash:7].[ext]'
         }
       }
     ]
   },
-  vue: {
-    loaders: utils.cssLoaders()
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'vue-select.css'
+    }),
+    new VueLoaderPlugin()
+  ],
+  devServer: {
+    hot: true,
+    hotOnly: true,
+    inline: true,
+    port: 8080,
+    before(app, server) {
+      chokidar.watch([
+        './**/*.html'
+      ]).on('all', function () {
+        server.sockWrite(server.sockets, 'content-changed');
+      })
+    }
   }
 }
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 9d26cc7..87dad4d 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,39 +1,24 @@
-var config = require('../config')
-var webpack = require('webpack')
 var merge = require('webpack-merge')
-var utils = require('./utils')
-var baseWebpackConfig = require('./webpack.base.conf')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
-// 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])
-})
+var baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
+  entry: './dev/dev.js',
   module: {
-    loaders: utils.styleLoaders().concat({ test: /\.md$/, loader: "html!markdown" })
+    rules: [{
+      test: /\.md$/,
+      loader: "html!markdown-code-highlight-loader"
+    }]
   },
-  // eval-source-map is faster for development
-  devtool: '#eval-source-map',
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: utils.shouldServeHomepage() ? './docs/homepage/home.html' : './dev/dev.html',
+      template: './dev/dev.html',
       inject: true
     })
   ],
-  markdownLoader: {
-    highlight: function (code) {
-      return require('highlight.js').highlightAuto(code).value;
-    }
+  optimization: {
+    noEmitOnErrors: true
   }
 })
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index 06c9457..9db7e5b 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,32 +1,13 @@
-const webpack = require('webpack')
-const base = require('./webpack.base.conf')
-const config = require('../config')
+var merge = require('webpack-merge')
 
-base.entry = {
-  lib: './src/index.js'
-}
+var baseWebpackConfig = require('./webpack.base.conf')
 
-base.output = {
-  path: config.build.assetsRoot,
-  publicPath: config.build.assetsPublicPath,
-  filename: 'vue-select.js',
-  library: 'VueSelect',
-  libraryTarget: 'umd'
-}
-
-var webpackConfig = Object.assign({}, base)
-
-webpackConfig.devtool = '#source-map'
-webpackConfig.plugins = (webpackConfig.plugins || []).concat([
-  new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: '"production"'
-    }
-  }),
-  new webpack.optimize.UglifyJsPlugin({
-    compress: { warnings: false }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin(),
-])
-
-module.exports = webpackConfig
+module.exports = merge(baseWebpackConfig, {
+  entry: './src/index.js',
+  output: {
+    filename: 'vue-select.js',
+    library: 'VueSelect',
+    libraryTarget: 'umd',
+    globalObject: "typeof self !== 'undefined' ? self : this"
+  }
+});
diff --git a/build/webpack.site.conf.js b/build/webpack.site.conf.js
index 1d53b2a..a3588f4 100644
--- a/build/webpack.site.conf.js
+++ b/build/webpack.site.conf.js
@@ -1,51 +1,15 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var webpack = require('webpack')
 var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
-var env = process.env.NODE_ENV === 'testing'
-    ? require('../config/test.env')
-    : config.homepage.env
+
+var baseWebpackConfig = require('./webpack.base.conf')
 
 module.exports = merge(baseWebpackConfig, {
-  entry: {
-    app: config.homepage.entry
-  },
-  module: {
-    loaders: utils.styleLoaders({ sourceMap: config.homepage.productionSourceMap, extract: true })
-  },
-  devtool: config.homepage.productionSourceMap ? '#source-map' : false,
+  entry: './docs/homepage/home.js',
   output: {
-    publicPath: config.homepage.assetsPublicPath,
-    path: config.homepage.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  vue: {
-    loaders: utils.cssLoaders({
-      sourceMap: config.homepage.productionSourceMap,
-      extract: true
-    })
+    filename: 'js/[name].[hash].js',
+    chunkFilename: 'js/[id].[hash].js'
   },
   plugins: [
-    // http://vuejs.github.io/vue-loader/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    // extract css into its own file
-    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './docs/homepage/home.html',
@@ -54,30 +18,34 @@ module.exports = merge(baseWebpackConfig, {
         removeComments: true,
         collapseWhitespace: true,
         removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
     }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-            module.resource &&
-            module.resource.indexOf(
-                path.join(__dirname, '../node_modules')
-            ) === 0
-        )
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'async',
+      minSize: 30000,
+      maxSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      maxInitialRequests: 3,
+      automaticNameDelimiter: '~',
+      name: true,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true
+        }
       }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    })
-  ]
+    },
+    runtimeChunk: {
+      name: "manifest",
+    }
+  }
 })
diff --git a/config/dev.env.js b/config/dev.env.js
deleted file mode 100644
index efead7c..0000000
--- a/config/dev.env.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})
diff --git a/config/index.js b/config/index.js
deleted file mode 100644
index 9945b5d..0000000
--- a/config/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path');
-
-module.exports = {
-  build: {
-    env: require('./prod.env'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: '',
-    assetsPublicPath: '/',
-    productionSourceMap: true
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: 8080,
-    proxyTable: {}
-  },
-  umd: {
-    assetsRoot: path.resolve(__dirname, '../umd'),
-    assetsPublicPath: '/'
-  },
-  homepage: {
-    env: require('./prod.env'),
-    entry: './docs/homepage/home.js',
-    assetsRoot: path.resolve(__dirname, '../site'),
-    assetsSubDirectory: '',
-    assetsPublicPath: '',
-    productionSourceMap: true
-  }
-};
-
diff --git a/config/prod.env.js b/config/prod.env.js
deleted file mode 100644
index 773d263..0000000
--- a/config/prod.env.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"'
-}
diff --git a/config/test.env.js b/config/test.env.js
deleted file mode 100644
index 89f90de..0000000
--- a/config/test.env.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})
diff --git a/package.json b/package.json
index b0fe0ae..f3cf4be 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
   "license": "MIT",
   "scripts": {
     "start": "npm run dev",
-    "dev": "node build/dev-server.js",
-    "dev:homepage": "node build/dev-server.js --docs",
+    "dev": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d",
+    "dev:homepage": "webpack-dev-server --config build/webpack.site.conf.js --hot --progress -d",
     "dev:docs": "gitbook serve",
-    "build": "node build/build.js",
-    "build:homepage": "node build/build.js --homepage",
+    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
+    "build:homepage": "cross-env NODE_ENV=production webpack --config build/webpack.site.conf.js --progress",
     "build:docs": "yarn run build:homepage && node build/build-docs.js",
     "deploy": "yarn run build:homepage && node build/build-docs.js && gh-pages -d site",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
@@ -27,62 +27,65 @@
     "vue": "2.x"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@vue/test-utils": "^1.0.0-beta.28",
+    "babel-loader": "^8.0.0",
+    "chokidar": "^2.0.4",
     "codeclimate-test-reporter": "^0.3.1",
     "connect-history-api-fallback": "^1.1.0",
-    "css-loader": "^0.23.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.4",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^3.0.0",
     "function-bind": "^1.0.2",
     "fuse.js": "^3.2.0",
     "gh-pages": "^0.11.0",
     "gitbook-plugin-codepen": "^0.1.2",
     "gitbook-plugin-edit-link": "^2.0.2",
     "gitbook-plugin-github": "^3.0.0",
-    "highlight.js": "^9.9.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.15.2",
-    "inject-loader": "^2.0.1",
-    "isparta-loader": "^2.0.0",
-    "jasmine": "^2.4.1",
-    "json-loader": "^0.5.4",
-    "karma": "^0.13.15",
+    "html-loader": "^0.5.0",
+    "html-webpack-plugin": "^3.2.0",
+    "inject-loader": "^4.0.0",
+    "isparta": "^4.1.1",
+    "jasmine": "^3.3.1",
+    "json-loader": "^0.5.0",
+    "karma": "^0.13.22",
     "karma-coverage": "^1.0.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-jasmine": "^2.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.7.0",
+    "karma-spec-reporter": "0.0.32",
+    "karma-webpack": "^1.8.1",
     "lolex": "^1.4.0",
-    "markdown-loader": "^0.1.7",
-    "node-sass": "^3.7.0",
-    "normalize.css": "^7.0.0",
-    "ora": "^0.2.0",
+    "markdown-code-highlight-loader": "^1.0.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.10.0",
+    "normalize.css": "^8.0.0",
+    "phantomjs-polyfill-object-assign": "0.0.2",
     "phantomjs-prebuilt": "^2.1.3",
     "prismjs": "^1.5.0",
-    "sass-loader": "^3.2.0",
+    "sass-loader": "^7.1.0",
     "shelljs": "^0.7.0",
-    "url-loader": "^0.5.7",
+    "url-loader": "^1.1.2",
     "vue": "^2.1.8",
-    "vue-hot-reload-api": "^2.0.7",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.0.2",
+    "vue-html-loader": "^1.2.4",
+    "vue-loader": "^15.4.2",
     "vue-markdown-loader": "^0.6.1",
     "vue-resource": "^1.0.3",
     "vue-select": "*",
-    "vue-style-loader": "^1.0.0",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.1.8",
     "vuex": "^2.1.1",
-    "webpack": "^1.12.2",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0",
+    "webpack": "^4.28.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.10",
     "webpack-merge": "^0.13.0"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/test/unit/index.js b/test/unit/index.js
deleted file mode 100644
index d1830c1..0000000
--- a/test/unit/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Polyfill fn.bind() for PhantomJS
-/* eslint-disable no-extend-native */
-Function.prototype.bind = require('function-bind')
-
-// require all test files (files that ends with .spec.js)
-var testsContext = require.context('./specs', true, /\.spec$/)
-testsContext.keys().forEach(testsContext)
-
-// require all src files except main.js for coverage.
-// you can also change this to match only the subset of files that
-// you want coverage for.
-var srcContext = require('../../src/components/Select.vue')
\ No newline at end of file
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 304072f..f4e07b3 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -1,78 +1,42 @@
-// This is a karma config file. For more details see
-//   http://karma-runner.github.io/0.13/config/configuration-file.html
-// we are also using it with karma-webpack
-//   https://github.com/webpack/karma-webpack
-
-var path = require('path')
 var merge = require('webpack-merge')
-var baseConfig = require('../../build/webpack.base.conf')
-var utils = require('../../build/utils')
-var webpack = require('webpack')
-var projectRoot = path.resolve(__dirname, '../../')
 
-var webpackConfig = merge(baseConfig, {
-  // use inline sourcemap for karma-sourcemap-loader
-  module: {
-    loaders: utils.styleLoaders()
-  },
-  devtool: '#inline-source-map',
-  vue: {
-    loaders: {
-      js: 'isparta'
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../../config/test.env')
-    })
-  ]
-})
+var baseWebpackConfig = require('../../build/webpack.base.conf')
 
-// no need for app entry during tests
-delete webpackConfig.entry
-
-// make sure isparta loader is applied before eslint
-webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
-webpackConfig.module.preLoaders.unshift({
-  test: /\.js$/,
-  loader: 'isparta',
-  include: path.resolve(projectRoot, 'src')
-})
-
-// only apply babel for test files when using isparta
-webpackConfig.module.loaders.some(function (loader, i) {
-  if (loader.loader === 'babel') {
-    loader.include = path.resolve(projectRoot, 'test/unit')
-    return true
-  }
-})
-
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
-    // to run in additional browsers:
-    // 1. install corresponding karma launcher
-    //    http://karma-runner.github.io/0.13/config/browsers.html
-    // 2. add it to the `browsers` array below.
     browsers: ['PhantomJS'],
     frameworks: ['jasmine'],
+    files: [
+      '../../node_modules/phantomjs-polyfill-object-assign/object-assign-polyfill.js',
+      '**/*.js'
+    ],
     reporters: ['spec', 'coverage'],
-    files: ['./index.js'],
     preprocessors: {
-      './index.js': ['webpack', 'sourcemap']
+      '**/*.js': ['webpack', 'sourcemap']
     },
-    webpack: webpackConfig,
+    captureConsole: true,
+    browserConsoleLogOptions: {
+      terminal: true,
+      level: ""
+    },
+
+    webpack: merge(baseWebpackConfig, {
+      entry: './dev/dev.js'
+    }),
+
     webpackMiddleware: {
       noInfo: true
     },
+
     specReporter: {
       suppressSkipped: true
     },
+
     coverageReporter: {
-      dir: './coverage',
-      reporters: [
-        { type: 'lcov', subdir: '.' },
-        { type: 'text-summary' }
-      ]
+      instrumenters: { isparta: require('isparta') },
+      instrumenter: {
+        '**/*.js': 'isparta'
+      }
     }
   })
-}
+}
\ No newline at end of file
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 4e602a3..c94fdf9 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -5,8 +5,6 @@ import Vue from 'vue'
 import vSelect from 'src/components/Select.vue'
 import pointerScroll from 'src/mixins/pointerScroll.js'
 Vue.config.productionTip = false
-//  http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html
-const Mock = require('!!vue?inject!src/components/Select.vue')
 
 Vue.component('v-select', vSelect)
 
@@ -70,6 +68,18 @@ function searchSubmit(vm, search = false) {
 	})
 }
 
+/**
+ * Replace component mixins (a simple approach to mocking)
+ * @param mixins 
+ */
+function OverrideMixin(mixins) {
+	return {
+		extends: Object.assign({}, vSelect, {
+			mixins: [].concat(mixins)
+		})
+	}
+}
+
 describe('Select.vue', () => {
 
 	describe('Selecting values', () => {
@@ -687,20 +697,18 @@ describe('Select.vue', () => {
 			})
 
 			it('should scroll up if the pointer is above the current viewport bounds', () => {
-				let methods = Object.assign(pointerScroll.methods, {
+				const scrollMixin = Object.assign({}, pointerScroll, {methods: Object.assign({}, pointerScroll.methods, {
 					pixelsToPointerTop() {
 						return 1
 					},
 					viewport() {
 						return {top: 2, bottom: 0}
 					}
-				})
+				})})
 				const vm = new Vue({
 					template: '<div><v-select :options="[\'one\', \'two\', \'three\']"></v-select></div>',
 					components: {
-						'v-select': Mock({
-							'../mixins/pointerScroll': {methods}
-						})
+						'v-select': OverrideMixin(scrollMixin)
 					},
 				}).$mount()
 
@@ -709,26 +717,19 @@ describe('Select.vue', () => {
 				expect(vm.$children[0].scrollTo).toHaveBeenCalledWith(1)
 			})
 
-			/**
-			 * @link 	https://github.com/vuejs/vue-loader/issues/434
-			 * @todo 	vue-loader/inject-loader fails when used twice in the same file,
-			 *        so the mock here is abastracted to a separate file.
-			 */
-			xit('should scroll down if the pointer is below the current viewport bounds', () => {
-				let methods = Object.assign(pointerScroll.methods, {
-				  pixelsToPointerBottom() {
-				    return 2
-				  },
-				  viewport() {
-				    return {top: 0, bottom: 1}
-				  }
-				})
+			it('should scroll down if the pointer is below the current viewport bounds', () => {
+				const scrollMixin = Object.assign({}, pointerScroll, {methods: Object.assign({}, pointerScroll.methods, {
+					pixelsToPointerBottom() {
+						return 2
+					},
+					viewport() {
+						return { top: 0, bottom: 1 }
+					}
+				})})
 				const vm = new Vue({
 					template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`,
 					components: {
-					  'v-select': Mock({
-					    '../mixins/pointerScroll': {methods}
-					  })
+						'v-select': OverrideMixin(scrollMixin)
 					},
 				}).$mount()