diff --git a/.eslintrc b/.eslintrc
index b851edc92b..9547a7446f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,7 +2,11 @@
   "extends": ["webpack", "prettier"],
   "globals": {
     "document": true,
-    "window": true
+    "window": true,
+    "self": true,
+    "WorkerGlobalScope": true,
+    "__resourceQuery": true,
+    "__webpack_dev_server_client__": true
   },
   "parserOptions": {
     "sourceType": "script",
diff --git a/client-src/.eslintrc b/client-src/.eslintrc
new file mode 100644
index 0000000000..bd14a19ef2
--- /dev/null
+++ b/client-src/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}
diff --git a/client-src/clients/BaseClient.js b/client-src/clients/BaseClient.js
index 1dfa65911b..7c47b70e2a 100644
--- a/client-src/clients/BaseClient.js
+++ b/client-src/clients/BaseClient.js
@@ -1,5 +1,3 @@
-'use strict';
-
 /* eslint-disable
   no-unused-vars
 */
diff --git a/client-src/clients/SockJSClient.js b/client-src/clients/SockJSClient.js
index 193c571d26..9a1fd729fa 100644
--- a/client-src/clients/SockJSClient.js
+++ b/client-src/clients/SockJSClient.js
@@ -1,5 +1,3 @@
-'use strict';
-
 /* eslint-disable
   no-unused-vars
 */
diff --git a/client-src/clients/WebsocketClient.js b/client-src/clients/WebsocketClient.js
index 0089f6faed..9785bb5517 100644
--- a/client-src/clients/WebsocketClient.js
+++ b/client-src/clients/WebsocketClient.js
@@ -1,5 +1,3 @@
-'use strict';
-
 /* global WebSocket */
 
 /* eslint-disable
diff --git a/client-src/default/index.js b/client-src/default/index.js
index dede6f0763..df7432b5ea 100644
--- a/client-src/default/index.js
+++ b/client-src/default/index.js
@@ -1,14 +1,14 @@
-'use strict';
-
-/* global __resourceQuery WorkerGlobalScope self */
 /* eslint prefer-destructuring: off */
-const stripAnsi = require('strip-ansi');
-const socket = require('./socket');
-const overlay = require('./overlay');
-const { log, setLogLevel } = require('./utils/log');
-const sendMessage = require('./utils/sendMessage');
-const reloadApp = require('./utils/reloadApp');
-const createSocketUrl = require('./utils/createSocketUrl');
+import stripAnsi from 'strip-ansi';
+import socket from './socket';
+import {
+  clear as clearOverlay,
+  showMessage as showMessageOverlay,
+} from './overlay';
+import { log, setLogLevel } from './utils/log';
+import sendMessage from './utils/sendMessage';
+import reloadApp from './utils/reloadApp';
+import createSocketUrl from './utils/createSocketUrl';
 
 const status = {
   isUnloading: false,
@@ -47,7 +47,7 @@ const onSocketMessage = {
     log.info('[WDS] App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     sendMessage('Invalid');
   },
@@ -57,7 +57,7 @@ const onSocketMessage = {
   'still-ok': function stillOk() {
     log.info('[WDS] Nothing changed.');
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     sendMessage('StillOk');
   },
@@ -93,7 +93,7 @@ const onSocketMessage = {
   ok() {
     sendMessage('Ok');
     if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
+      clearOverlay();
     }
     if (options.initial) {
       return (options.initial = false);
@@ -112,7 +112,7 @@ const onSocketMessage = {
       log.warn(strippedWarnings[i]);
     }
     if (options.useWarningOverlay) {
-      overlay.showMessage(warnings);
+      showMessageOverlay(warnings);
     }
 
     if (options.initial) {
@@ -128,7 +128,7 @@ const onSocketMessage = {
       log.error(strippedErrors[i]);
     }
     if (options.useErrorOverlay) {
-      overlay.showMessage(errors);
+      showMessageOverlay(errors);
     }
     options.initial = false;
   },
diff --git a/client-src/default/overlay.js b/client-src/default/overlay.js
index a1bb6cef2b..f73cb29578 100644
--- a/client-src/default/overlay.js
+++ b/client-src/default/overlay.js
@@ -1,12 +1,10 @@
-'use strict';
-
 // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
-const ansiHTML = require('ansi-html');
-const { AllHtmlEntities } = require('html-entities');
+import ansiHTML from 'ansi-html';
+import { AllHtmlEntities as Entities } from 'html-entities';
 
-const entities = new AllHtmlEntities();
+const entities = new Entities();
 const colors = {
   reset: ['transparent', 'transparent'],
   black: '181818',
@@ -95,8 +93,8 @@ function ensureOverlayDivExists(onOverlayDivReady) {
   document.body.appendChild(overlayIframe);
 }
 
-// Successful compilation.
-function clear() {
+// successful compilation.
+export function clear() {
   if (!overlayDiv) {
     // It is not there in the first place.
     return;
@@ -110,7 +108,7 @@ function clear() {
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
-function showMessage(messages) {
+export function showMessage(messages) {
   ensureOverlayDivExists((div) => {
     // Make it look similar to our terminal.
     div.innerHTML = `<span style="color: #${
@@ -120,8 +118,3 @@ function showMessage(messages) {
     )}`;
   });
 }
-
-module.exports = {
-  clear,
-  showMessage,
-};
diff --git a/client-src/default/socket.js b/client-src/default/socket.js
index 7752ffea8a..382fe80fdc 100644
--- a/client-src/default/socket.js
+++ b/client-src/default/socket.js
@@ -1,6 +1,3 @@
-'use strict';
-
-/* global __webpack_dev_server_client__ */
 /* eslint-disable
   camelcase
 */
@@ -58,4 +55,4 @@ const socket = function initSocket(url, handlers) {
   });
 };
 
-module.exports = socket;
+export default socket;
diff --git a/client-src/default/utils/createSocketUrl.js b/client-src/default/utils/createSocketUrl.js
index d847769021..92fa5b6637 100644
--- a/client-src/default/utils/createSocketUrl.js
+++ b/client-src/default/utils/createSocketUrl.js
@@ -1,10 +1,6 @@
-'use strict';
-
-/* global self */
-
-const url = require('url');
-const querystring = require('querystring');
-const getCurrentScriptSource = require('./getCurrentScriptSource');
+import url from 'url';
+import querystring from 'querystring';
+import getCurrentScriptSource from './getCurrentScriptSource';
 
 function createSocketUrl(resourceQuery) {
   let urlParts;
@@ -82,4 +78,4 @@ function createSocketUrl(resourceQuery) {
   });
 }
 
-module.exports = createSocketUrl;
+export default createSocketUrl;
diff --git a/client-src/default/utils/getCurrentScriptSource.js b/client-src/default/utils/getCurrentScriptSource.js
index 7d1d609a6a..8a4244a2ee 100644
--- a/client-src/default/utils/getCurrentScriptSource.js
+++ b/client-src/default/utils/getCurrentScriptSource.js
@@ -1,5 +1,3 @@
-'use strict';
-
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
@@ -17,4 +15,4 @@ function getCurrentScriptSource() {
   throw new Error('[WDS] Failed to get current script source.');
 }
 
-module.exports = getCurrentScriptSource;
+export default getCurrentScriptSource;
diff --git a/client-src/default/utils/log.js b/client-src/default/utils/log.js
index 91d9aa763b..6ae76e069b 100644
--- a/client-src/default/utils/log.js
+++ b/client-src/default/utils/log.js
@@ -1,6 +1,6 @@
-'use strict';
+import { getLogger } from 'loglevel';
 
-const log = require('loglevel').getLogger('webpack-dev-server');
+export const log = getLogger('webpack-dev-server');
 
 const INFO = 'info';
 const WARN = 'warn';
@@ -17,7 +17,7 @@ const NONE = 'none';
 // Set the default log level
 log.setDefaultLevel(INFO);
 
-function setLogLevel(level) {
+export function setLogLevel(level) {
   switch (level) {
     case INFO:
     case WARN:
@@ -40,8 +40,3 @@ function setLogLevel(level) {
       log.error(`[WDS] Unknown clientLogLevel '${level}'`);
   }
 }
-
-module.exports = {
-  log,
-  setLogLevel,
-};
diff --git a/client-src/default/utils/reloadApp.js b/client-src/default/utils/reloadApp.js
index f8dea5c211..6c11ad9c5f 100644
--- a/client-src/default/utils/reloadApp.js
+++ b/client-src/default/utils/reloadApp.js
@@ -1,8 +1,4 @@
-'use strict';
-
-/* global WorkerGlobalScope self */
-
-const { log } = require('./log');
+import { log } from './log';
 
 function reloadApp(
   { hotReload, hot, liveReload },
@@ -45,4 +41,4 @@ function reloadApp(
   }
 }
 
-module.exports = reloadApp;
+export default reloadApp;
diff --git a/client-src/default/utils/sendMessage.js b/client-src/default/utils/sendMessage.js
index f4dc2555dc..6cf28a5dd1 100644
--- a/client-src/default/utils/sendMessage.js
+++ b/client-src/default/utils/sendMessage.js
@@ -1,9 +1,5 @@
-'use strict';
-
-/* global __resourceQuery WorkerGlobalScope self */
-
 // Send messages to the outside, so plugins can consume it.
-function sendMsg(type, data) {
+function sendMessage(type, data) {
   if (
     typeof self !== 'undefined' &&
     (typeof WorkerGlobalScope === 'undefined' ||
@@ -19,4 +15,4 @@ function sendMsg(type, data) {
   }
 }
 
-module.exports = sendMsg;
+export default sendMessage;
diff --git a/client-src/default/webpack.config.js b/client-src/default/webpack.config.js
index 3968b43bd9..b5d2b46bf7 100644
--- a/client-src/default/webpack.config.js
+++ b/client-src/default/webpack.config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 const webpack = require('webpack');
 
 module.exports = {
diff --git a/client-src/live/index.js b/client-src/live/index.js
index f892102170..2af4191256 100644
--- a/client-src/live/index.js
+++ b/client-src/live/index.js
@@ -1,11 +1,9 @@
-'use strict';
-
 /* eslint import/no-extraneous-dependencies: off */
 
-const $ = require('jquery');
-const stripAnsi = require('strip-ansi');
-const socket = require('../default/socket');
-require('./style.css');
+import $ from 'jquery';
+import stripAnsi from 'strip-ansi';
+import socket from '../default/socket';
+import './style.css';
 
 let hot = false;
 let currentHash = '';
diff --git a/client-src/live/webpack.config.js b/client-src/live/webpack.config.js
index 9bb71611f8..07818c5c9a 100644
--- a/client-src/live/webpack.config.js
+++ b/client-src/live/webpack.config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 const path = require('path');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
diff --git a/client-src/sockjs/index.js b/client-src/sockjs/index.js
index a7db01b9d3..988f4885e3 100644
--- a/client-src/sockjs/index.js
+++ b/client-src/sockjs/index.js
@@ -1,3 +1,3 @@
-'use strict';
+import client from 'sockjs-client';
 
-module.exports = require('sockjs-client');
+export default client;
diff --git a/client-src/sockjs/webpack.config.js b/client-src/sockjs/webpack.config.js
index 4847a2b910..61c7f655bc 100644
--- a/client-src/sockjs/webpack.config.js
+++ b/client-src/sockjs/webpack.config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 module.exports = {
   mode: 'production',
   output: {
diff --git a/test/client/index.test.js b/test/client/index.test.js
index 72eb8a63cd..20d99df19f 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -3,7 +3,6 @@
 /* eslint-disable
   no-undefined
 */
-/* global self */
 
 describe('index', () => {
   let log;
diff --git a/test/client/utils/createSocketUrl.test.js b/test/client/utils/createSocketUrl.test.js
index 09a4cd6adc..b521242c76 100644
--- a/test/client/utils/createSocketUrl.test.js
+++ b/test/client/utils/createSocketUrl.test.js
@@ -21,7 +21,10 @@ describe('createSocketUrl', () => {
       () => () => url
     );
 
-    const createSocketUrl = require('../../../client-src/default/utils/createSocketUrl');
+    const {
+      default: createSocketUrl,
+      // eslint-disable-next-line global-require
+    } = require('../../../client-src/default/utils/createSocketUrl');
 
     test(`should return the url when __resourceQuery is ${url}`, () => {
       expect(createSocketUrl(url)).toMatchSnapshot();
diff --git a/test/client/utils/getCurrentScriptSource.test.js b/test/client/utils/getCurrentScriptSource.test.js
index 8fb953b1f3..b6c4f4d017 100644
--- a/test/client/utils/getCurrentScriptSource.test.js
+++ b/test/client/utils/getCurrentScriptSource.test.js
@@ -1,6 +1,8 @@
 'use strict';
 
-const getCurrentScriptSource = require('../../../client-src/default/utils/getCurrentScriptSource');
+const {
+  default: getCurrentScriptSource,
+} = require('../../../client-src/default/utils/getCurrentScriptSource');
 
 describe('getCurrentScriptSource', () => {
   afterEach(() => {
diff --git a/test/client/utils/reloadApp.test.js b/test/client/utils/reloadApp.test.js
index f2b39859db..84b346769b 100644
--- a/test/client/utils/reloadApp.test.js
+++ b/test/client/utils/reloadApp.test.js
@@ -1,7 +1,5 @@
 'use strict';
 
-/* global self */
-
 describe('reloadApp', () => {
   let reloadApp;
   let log;
@@ -23,7 +21,8 @@ describe('reloadApp', () => {
       };
     });
 
-    reloadApp = require('../../../client-src/default/utils/reloadApp');
+    // eslint-disable-next-line global-require
+    reloadApp = require('../../../client-src/default/utils/reloadApp').default;
   });
 
   afterEach(() => {
diff --git a/test/client/utils/sendMessage.test.js b/test/client/utils/sendMessage.test.js
index a60f2548bc..e13b7b49c8 100644
--- a/test/client/utils/sendMessage.test.js
+++ b/test/client/utils/sendMessage.test.js
@@ -1,8 +1,8 @@
 'use strict';
 
-/* global self */
-
-const sendMessage = require('../../../client-src/default/utils/sendMessage');
+const {
+  default: sendMessage,
+} = require('../../../client-src/default/utils/sendMessage');
 
 describe('sendMessage', () => {
   afterEach(() => {