update lazy-compilation example for webpack-dev-server@4

examples/lazy-compilation/README.md

@@ -12,33 +12,31 @@ const libraries = {
 	"all of them": () => import("./all")
 };
 
-window.onload = () => {
-	document.body.style = "font-size: 16pt;";
-	const pre = document.createElement("pre");
-	pre.style = "height: 200px; overflow-y: auto";
-	pre.innerText =
-		"Click on a button to load the library with import(). The first click triggers a lazy compilation of the module.";
-	for (const key of Object.keys(libraries)) {
-		const button = document.createElement("button");
-		const loadFn = libraries[key];
-		button.innerText = key;
-		button.onclick = async () => {
-			pre.innerText = "Loading " + key + "...";
-			const result = await loadFn();
-			pre.innerText = `${key} = {\n  ${Object.keys(result).join(",\n  ")}\n}`;
-		};
-		document.body.appendChild(button);
-	}
+document.body.style = "font-size: 16pt;";
+const pre = document.createElement("pre");
+pre.style = "height: 200px; overflow-y: auto";
+pre.innerText =
+	"Click on a button to load the library with import(). The first click triggers a lazy compilation of the module.";
+for (const key of Object.keys(libraries)) {
 	const button = document.createElement("button");
-	button.innerText = "Load more...";
+	const loadFn = libraries[key];
+	button.innerText = key;
 	button.onclick = async () => {
-		pre.innerText = "Loading more...";
-		await import("./more");
-		pre.innerText = "More libraries available.";
+		pre.innerText = "Loading " + key + "...";
+		const result = await loadFn();
+		pre.innerText = `${key} = {\n  ${Object.keys(result).join(",\n  ")}\n}`;
 	};
 	document.body.appendChild(button);
-	document.body.appendChild(pre);
+}
+const button = document.createElement("button");
+button.innerText = "Load more...";
+button.onclick = async () => {
+	pre.innerText = "Loading more...";
+	await import("./more");
+	pre.innerText = "More libraries available.";
 };
+document.body.appendChild(button);
+document.body.appendChild(pre);
 ```
 
 # webpack.config.js
@@ -60,7 +58,9 @@ module.exports = {
 	},
 	devServer: {
 		hot: true,
-		publicPath: "/dist/"
+		devMiddleware: {
+			publicPath: "/dist/"
+		}
 	},
 	plugins: [new HotModuleReplacementPlugin()]
 };

examples/lazy-compilation/example.js

@@ -7,30 +7,28 @@ const libraries = {
 	"all of them": () => import("./all")
 };
 
-window.onload = () => {
-	document.body.style = "font-size: 16pt;";
-	const pre = document.createElement("pre");
-	pre.style = "height: 200px; overflow-y: auto";
-	pre.innerText =
-		"Click on a button to load the library with import(). The first click triggers a lazy compilation of the module.";
-	for (const key of Object.keys(libraries)) {
-		const button = document.createElement("button");
-		const loadFn = libraries[key];
-		button.innerText = key;
-		button.onclick = async () => {
-			pre.innerText = "Loading " + key + "...";
-			const result = await loadFn();
-			pre.innerText = `${key} = {\n  ${Object.keys(result).join(",\n  ")}\n}`;
-		};
-		document.body.appendChild(button);
-	}
+document.body.style = "font-size: 16pt;";
+const pre = document.createElement("pre");
+pre.style = "height: 200px; overflow-y: auto";
+pre.innerText =
+	"Click on a button to load the library with import(). The first click triggers a lazy compilation of the module.";
+for (const key of Object.keys(libraries)) {
 	const button = document.createElement("button");
-	button.innerText = "Load more...";
+	const loadFn = libraries[key];
+	button.innerText = key;
 	button.onclick = async () => {
-		pre.innerText = "Loading more...";
-		await import("./more");
-		pre.innerText = "More libraries available.";
+		pre.innerText = "Loading " + key + "...";
+		const result = await loadFn();
+		pre.innerText = `${key} = {\n  ${Object.keys(result).join(",\n  ")}\n}`;
 	};
 	document.body.appendChild(button);
-	document.body.appendChild(pre);
+}
+const button = document.createElement("button");
+button.innerText = "Load more...";
+button.onclick = async () => {
+	pre.innerText = "Loading more...";
+	await import("./more");
+	pre.innerText = "More libraries available.";
 };
+document.body.appendChild(button);
+document.body.appendChild(pre);

examples/lazy-compilation/public/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-	<head>
+	<body>
 		<script src="dist/main.js"></script>
-	</head>
+	</body>
 </html>

examples/lazy-compilation/webpack.config.js

@@ -10,13 +10,13 @@ module.exports = {
 		idleTimeout: 5000
 	},
 	experiments: {
-		lazyCompilation: {
-			entries: false
-		}
+		lazyCompilation: true
 	},
 	devServer: {
 		hot: true,
-		publicPath: "/dist/"
+		devMiddleware: {
+			publicPath: "/dist/"
+		}
 	},
 	plugins: [new HotModuleReplacementPlugin()]
 };