docs(guides): finish up code-splitting and lazy-loading

Author: skipjack

content/guides/code-splitting.md

@@ -62,6 +62,7 @@ __webpack.config.js__
 
 ``` js
 const path = require('path');
+const HTMLWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -73,7 +74,7 @@ module.exports = {
     path: path.resolve(__dirname, 'dist')
   },
   plugins: [
-    new HtmlWebpackPlugin({
+    new HTMLWebpackPlugin({
       title: 'Code Splitting'
     })
   ]
@@ -113,14 +114,15 @@ __webpack.config.js__
 ``` diff
   const path = require('path');
 + const webpack = require('webpack');
+  const HTMLWebpackPlugin = require('html-webpack-plugin');
 
   module.exports = {
     entry: {
       index: './src/index.js',
       another: './src/another-module.js'
     },
     plugins: [
-      new HtmlWebpackPlugin({
+      new HTMLWebpackPlugin({
         title: 'Code Splitting'
 -     })
 +     }),
@@ -170,6 +172,7 @@ __webpack.config.js__
 ``` diff
   const path = require('path');
 - const webpack = require('webpack');
+  const HTMLWebpackPlugin = require('html-webpack-plugin');
 
   module.exports = {
     entry: {
@@ -178,7 +181,7 @@ __webpack.config.js__
 -     another: './src/another-module.js'
     },
     plugins: [
-      new HtmlWebpackPlugin({
+      new HTMLWebpackPlugin({
         title: 'Code Splitting'
 -     }),
 +     })
@@ -194,6 +197,21 @@ __webpack.config.js__
   };
 ```
 
+We'll also update our project to remove the now unused files:
+
+__project__
+
+``` diff
+webpack-demo
+|- package.json
+|- webpack.config.js
+|- /dist
+|- /src
+  |- index.js
+- |- another-module.js
+|- /node_modules
+```
+
 Now, instead of statically importing lodash, we'll use dynamic importing to separate a chunk:
 
 __src/index.js__

content/guides/lazy-loading.md

@@ -19,7 +19,20 @@ Lazy, or "on demand", loading is a great way to optimize your site or applicatio
 
 Let's take the example from [Code Splitting](/guides/code-splitting#dynamic-imports) and tweak it a bit to demonstrate this concept even more. The code there does cause a separate chunk, `lodash.bundle.js`, to be generated and technically "lazy-loads" it as soon as the script is run. The trouble is that no user interaction is required to load the bundle -- meaning that every time the page is loaded, the request will fire. This doesn't help us too much and will impact performance negatively.
 
-Let's try something different. We'll add an interaction to log some text to the console when the user clicks a button. However, we'll wait to load that code until the actual interaction occurs for the first time. To do this we'll go back and extend the original example from [Getting Started](/guides/getting-started) and leave the `lodash` in the main chunk.
+Let's try something different. We'll add an interaction to log some text to the console when the user clicks a button. However, we'll wait to load that code (`print.js`) until the interaction occurs for the first time. To do this we'll go back and rework the [final _Dynamic Imports_ example](/guides/code-splitting#dynamic-imports) from _Code Splitting_ and leave `lodash` in the main chunk.
+
+__project__
+
+``` diff
+webpack-demo
+|- package.json
+|- webpack.config.js
+|- /dist
+|- /src
+  |- index.js
++ |- print.js
+|- /node_modules
+```
 
 __src/print.js__
 
@@ -34,14 +47,15 @@ export default () => {
 __src/index.js__
 
 ``` diff
-  import _ from 'lodash';
-
-  function component() {
++ import _ from 'lodash';
++
+- async function getComponent() {
++ function component() {
     var element = document.createElement('div');
+-   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
 +   var button = document.createElement('button');
 +   var br = document.createElement('br');
 
--   // Lodash, now imported by this script
 +   button.innerHTML = 'Click me and look at the console!';
     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 +   element.appendChild(br);
@@ -58,14 +72,34 @@ __src/index.js__
     return element;
   }
 
-  document.body.appendChild(component());
+- getComponent().then(component => {
+-   document.body.appendChild(component);
+- });
++ document.body.appendChild(component());
 ```
 
 W> Note that when using `import()` on ES6 modules you must reference the `.default` property as it's the actual `module` object that will be returned when the promise is resolved.
 
 Now let's run webpack and check out our new lazy-loading functionality:
 
-?> Add bash example of webpack output
+``` bash
+Hash: e0f95cc0bda81c2a1340
+Version: webpack 3.0.0
+Time: 1378ms
+          Asset       Size  Chunks                    Chunk Names
+print.bundle.js  417 bytes       0  [emitted]         print
+index.bundle.js     548 kB       1  [emitted]  [big]  index
+     index.html  189 bytes          [emitted]
+   [0] ./src/index.js 742 bytes {1} [built]
+   [2] (webpack)/buildin/global.js 509 bytes {1} [built]
+   [3] (webpack)/buildin/module.js 517 bytes {1} [built]
+   [4] ./src/print.js 165 bytes {0} [built]
+    + 1 hidden module
+Child html-webpack-plugin for "index.html":
+       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
+       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
+        + 2 hidden modules
+```
 
 
 ## Frameworks