update webpack4 and webpack5 examples

Author: theKashey

examples/webpack/webpack4/src/client/App.js

@@ -18,16 +18,16 @@ const App = () => (
       <X letter="A" />
     </p>
     <p>
-      Lazy load letter C:
+      Lazy load letter B:
       <X letter="B" />
     </p>
     <p>
-      Lazy load letter only on Client C and D:
-      <ClientSideOnly letter="C" />
+      Lazy load letter <strong>only on Client</strong> C and D:
+      <ClientSideOnly letter="C" /> +
       <ClientSideOnly letter="D" />
     </p>
     <p>
-      lazy load momentjs:
+      lazy load momentjs and format date:
       <Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
     </p>
   </div>

examples/webpack/webpack5/package.json

@@ -20,7 +20,7 @@
     "css-loader": "^5.0.0",
     "mini-css-extract-plugin": "^1.1.0",
     "nodemon": "^1.19.0",
-    "webpack": "^5.1.3",
+    "webpack": "^5.17.0",
     "webpack-cli": "^4.1.0",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-node-externals": "^2.5.2"

examples/webpack/webpack5/src/client/App.js

@@ -3,6 +3,10 @@ import loadable from '@loadable/component'
 
 const X = loadable(props => import(`./letters/${props.letter}`))
 
+const ClientSideOnly = loadable(props => import(`./letters/${props.letter}`), {
+  ssr: false,
+})
+
 const Moment = loadable.lib(() => import('moment'), {
   resolveComponent: moment => moment.default || moment,
 })
@@ -14,7 +18,16 @@ const App = () => (
       <X letter="A" />
     </p>
     <p>
-      lazy load momentjs:
+      Lazy load letter B:
+      <X letter="B" />
+    </p>
+    <p>
+      Lazy load letter <strong>only on Client</strong> C and D:
+      <ClientSideOnly letter="C" /> +
+      <ClientSideOnly letter="D" />
+    </p>
+    <p>
+      lazy load momentjs and format date:
       <Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
     </p>
   </div>

examples/webpack/webpack5/src/client/letters/B.js

@@ -0,0 +1,3 @@
+const B = () => 'Lazy-Letter-B'
+
+export default B

examples/webpack/webpack5/src/client/letters/C.js

@@ -0,0 +1,3 @@
+const C = () => 'Lazy-Letter-C'
+
+export default C

examples/webpack/webpack5/src/client/letters/D.js

@@ -0,0 +1,4 @@
+// named as C
+const C = () => 'and-D'
+
+export default C