diff --git a/client-src/index.js b/client-src/index.js
index eb2ff4bc1d..3cbacd742b 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -4,7 +4,7 @@ import webpackHotLog from "webpack/hot/log.js";
 import stripAnsi from "./modules/strip-ansi/index.js";
 import parseURL from "./utils/parseURL.js";
 import socket from "./socket.js";
-import { show, hide } from "./overlay.js";
+import { formatProblem, show, hide } from "./overlay.js";
 import { log, setLogLevel } from "./utils/log.js";
 import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
@@ -152,14 +152,16 @@ const onSocketMessage = {
   warnings(warnings) {
     log.warn("Warnings while compiling.");
 
-    const strippedWarnings = warnings.map((warning) =>
-      stripAnsi(warning.message ? warning.message : warning)
-    );
+    const printableWarnings = warnings.map((error) => {
+      const { header, body } = formatProblem("warning", error);
+
+      return `${header}\n${stripAnsi(body)}`;
+    });
 
-    sendMessage("Warnings", strippedWarnings);
+    sendMessage("Warnings", printableWarnings);
 
-    for (let i = 0; i < strippedWarnings.length; i++) {
-      log.warn(strippedWarnings[i]);
+    for (let i = 0; i < printableWarnings.length; i++) {
+      log.warn(printableWarnings[i]);
     }
 
     const needShowOverlayForWarnings =
@@ -168,7 +170,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.warnings;
 
     if (needShowOverlayForWarnings) {
-      show(warnings, "warnings");
+      show("warning", warnings);
     }
 
     reloadApp(options, status);
@@ -176,14 +178,16 @@ const onSocketMessage = {
   errors(errors) {
     log.error("Errors while compiling. Reload prevented.");
 
-    const strippedErrors = errors.map((error) =>
-      stripAnsi(error.message ? error.message : error)
-    );
+    const printableErrors = errors.map((error) => {
+      const { header, body } = formatProblem("error", error);
+
+      return `${header}\n${stripAnsi(body)}`;
+    });
 
-    sendMessage("Errors", strippedErrors);
+    sendMessage("Errors", printableErrors);
 
-    for (let i = 0; i < strippedErrors.length; i++) {
-      log.error(strippedErrors[i]);
+    for (let i = 0; i < printableErrors.length; i++) {
+      log.error(printableErrors[i]);
     }
 
     const needShowOverlayForErrors =
@@ -192,7 +196,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.errors;
 
     if (needShowOverlayForErrors) {
-      show(errors, "errors");
+      show("error", errors);
     }
   },
   error(error) {
diff --git a/client-src/overlay.js b/client-src/overlay.js
index 609fb0a314..819597ed15 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -124,20 +124,48 @@ function hide() {
   containerElement = null;
 }
 
+function formatProblem(type, item) {
+  let header = type === "warning" ? "WARNING" : "ERROR";
+  let body = "";
+
+  if (typeof item === "string") {
+    body += item;
+  } else {
+    const file = item.file || "";
+    // eslint-disable-next-line no-nested-ternary
+    const moduleName = item.moduleName
+      ? item.moduleName.indexOf("!") !== -1
+        ? `${item.moduleName.replace(/^(\s|\S)*!/, "")} (${item.moduleName})`
+        : `${item.moduleName}`
+      : "";
+    const loc = item.loc;
+
+    header += `${
+      moduleName || file
+        ? ` in ${
+            moduleName ? `${moduleName}${file ? ` (${file})` : ""}` : file
+          }${loc ? ` ${loc}` : ""}`
+        : ""
+    }`;
+    body += item.message || "";
+  }
+
+  return { header, body };
+}
+
 // Compilation with errors (e.g. syntax error or missing modules).
-function show(messages, type) {
+function show(type, messages) {
   ensureOverlayExists(() => {
     messages.forEach((message) => {
       const entryElement = document.createElement("div");
       const typeElement = document.createElement("span");
-      // ts-loader will output `error.file` for error file path, not in message
-      typeElement.innerText =
-        (type === "warnings" ? "Warning:" : "Error:") + (message.file || "");
+      const { header, body } = formatProblem(type, message);
+
+      typeElement.innerText = header;
       typeElement.style.color = `#${colors.red}`;
 
       // Make it look similar to our terminal.
-      const errorMessage = message.message || messages[0];
-      const text = ansiHTML(encode(errorMessage));
+      const text = ansiHTML(encode(body));
       const messageTextNode = document.createElement("div");
 
       messageTextNode.innerHTML = text;
@@ -154,4 +182,4 @@ function show(messages, type) {
   });
 }
 
-export { show, hide };
+export { formatProblem, show, hide };
diff --git a/test/client/__snapshots__/index.test.js.snap.webpack4 b/test/client/__snapshots__/index.test.js.snap.webpack4
index 6705d56be4..49d113ed5d 100644
--- a/test/client/__snapshots__/index.test.js.snap.webpack4
+++ b/test/client/__snapshots__/index.test.js.snap.webpack4
@@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
 exports[`index should run onSocketMessage.warnings 3`] = `
 Array [
   Array [
-    "warn1",
+    "HEADER warning
+BODY: warning",
   ],
   Array [
-    "warn2",
+    "HEADER warning
+BODY: warning",
   ],
   Array [
-    "warn3",
+    "HEADER warning
+BODY: warning",
   ],
 ]
 `;
diff --git a/test/client/__snapshots__/index.test.js.snap.webpack5 b/test/client/__snapshots__/index.test.js.snap.webpack5
index 6705d56be4..49d113ed5d 100644
--- a/test/client/__snapshots__/index.test.js.snap.webpack5
+++ b/test/client/__snapshots__/index.test.js.snap.webpack5
@@ -45,13 +45,16 @@ exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;
 exports[`index should run onSocketMessage.warnings 3`] = `
 Array [
   Array [
-    "warn1",
+    "HEADER warning
+BODY: warning",
   ],
   Array [
-    "warn2",
+    "HEADER warning
+BODY: warning",
   ],
   Array [
-    "warn3",
+    "HEADER warning
+BODY: warning",
   ],
 ]
 `;
diff --git a/test/client/index.test.js b/test/client/index.test.js
index 30e3cb54cb..34fafa793b 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -39,6 +39,9 @@ describe("index", () => {
     jest.setMock("../../client-src/overlay.js", {
       hide: jest.fn(),
       show: jest.fn(),
+      formatProblem: (item) => {
+        return { header: "HEADER warning", body: `BODY: ${item}` };
+      },
     });
     overlay = require("../../client-src/overlay");
 
diff --git a/test/e2e/__snapshots__/logging.test.js.snap.webpack4 b/test/e2e/__snapshots__/logging.test.js.snap.webpack4
index 592e6a4b43..5c4d09fab8 100644
--- a/test/e2e/__snapshots__/logging.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/logging.test.js.snap.webpack4
@@ -19,7 +19,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -30,7 +31,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -122,7 +124,8 @@ exports[`logging should work and log only error (sockjs) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -130,7 +133,8 @@ exports[`logging should work and log only error (ws) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -166,9 +170,11 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -176,9 +182,11 @@ exports[`logging should work and log warning and errors (ws) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -189,7 +197,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
 ]
 `;
 
@@ -200,7 +209,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
 ]
 `;
 
diff --git a/test/e2e/__snapshots__/logging.test.js.snap.webpack5 b/test/e2e/__snapshots__/logging.test.js.snap.webpack5
index 592e6a4b43..5c4d09fab8 100644
--- a/test/e2e/__snapshots__/logging.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/logging.test.js.snap.webpack5
@@ -19,7 +19,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -30,7 +31,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -122,7 +124,8 @@ exports[`logging should work and log only error (sockjs) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -130,7 +133,8 @@ exports[`logging should work and log only error (ws) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -166,9 +170,11 @@ exports[`logging should work and log warning and errors (sockjs) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -176,9 +182,11 @@ exports[`logging should work and log warning and errors (ws) 1`] = `
 Array [
   "Hey.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
   "[webpack-dev-server] Errors while compiling. Reload prevented.",
-  "[webpack-dev-server] Error from compilation",
+  "[webpack-dev-server] ERROR
+Error from compilation",
 ]
 `;
 
@@ -189,7 +197,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
 ]
 `;
 
@@ -200,7 +209,8 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] Warnings while compiling.",
-  "[webpack-dev-server] Warning from compilation",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
 ]
 `;
 
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index d8a4d50c72..3c1eaab350 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -63,7 +63,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
@@ -145,7 +145,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
@@ -227,7 +227,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
@@ -276,7 +276,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
@@ -377,12 +377,12 @@ exports[`overlay should show a warning and error for initial compilation and pro
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
       <br /><br />
     </div>
@@ -445,27 +445,27 @@ exports[`overlay should show a warning and error for initial compilation: overla
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -528,7 +528,7 @@ exports[`overlay should show a warning and hide them after closing connection: o
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -598,7 +598,7 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -661,7 +661,7 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -724,7 +724,7 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -787,7 +787,7 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -850,7 +850,7 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         <span
           style=\\"
@@ -926,7 +926,7 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -989,7 +989,7 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -1052,7 +1052,7 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -1115,7 +1115,7 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index b92f1d39db..8c02ddba96 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -63,7 +63,8 @@ exports[`overlay should not show initially, then show on an error and allow to c
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
+      ><br /><br />
       <div>
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
@@ -145,7 +146,8 @@ exports[`overlay should not show initially, then show on an error, then hide on
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
+      ><br /><br />
       <div>
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
@@ -227,7 +229,8 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
+      ><br /><br />
       <div>
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
@@ -276,7 +279,8 @@ exports[`overlay should not show initially, then show on an error, then show oth
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
+      ><br /><br />
       <div>
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
@@ -377,12 +381,12 @@ exports[`overlay should show a warning and error for initial compilation and pro
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
       <br /><br />
     </div>
@@ -445,27 +449,27 @@ exports[`overlay should show a warning and error for initial compilation: overla
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -528,7 +532,7 @@ exports[`overlay should show a warning and hide them after closing connection: o
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -598,7 +602,7 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -661,7 +665,7 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -724,7 +728,7 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -787,7 +791,7 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>
@@ -850,7 +854,7 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>
         <span
           style=\\"
@@ -926,7 +930,7 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -989,7 +993,7 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -1052,7 +1056,7 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
       <div>Error from compilation. Can't find 'test' module.</div>
       <br /><br />
     </div>
@@ -1115,7 +1119,7 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
       X</button
     ><br /><br />
     <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
       <div>Warning from compilation</div>
       <br /><br />
     </div>