Merge pull request Lemoncode#21 from Lemoncode/master-front-end-ix-bu…

…ndler-update Master front end ix bundler update
brauliodiez · Nov 6, 2020 · 18c9b16 · 18c9b16
2 parents ca7bc3e + d67d931
commit 18c9b16
Show file tree

Hide file tree

Showing 113 changed files with 676 additions and 622 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/03-bundling/01-webpack/01-zero-config/package.json b/03-bundling/01-webpack/01-zero-config/package.json
@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.3.1",
+    "webpack-cli": "^4.1.0"
   }
 }
diff --git a/03-bundling/01-webpack/01-zero-config/src/index.js b/03-bundling/01-webpack/01-zero-config/src/index.js
@@ -1 +1 @@
-console.log("Look ma! Zero config");
+console.log("Look ma! Zero config");
diff --git a/03-bundling/01-webpack/02-boiler-plate/README.md b/03-bundling/01-webpack/02-boiler-plate/README.md
@@ -85,12 +85,12 @@ _./package.json_
 {
 ...
   "devDependencies": {
-+   "@babel/cli": "^7.1.2",
-+   "@babel/core": "^7.1.2",
-+   "@babel/preset-env": "^7.1.0",
-+   "babel-loader": "^8.0.4",
-+   "webpack": "^4.23.1",
-+   "webpack-cli": "^3.1.2"
++    "@babel/cli": "^7.12.1",
++    "@babel/core": "^7.12.3",
++    "@babel/preset-env": "^7.12.1",
++    "babel-loader": "^8.1.0",
++    "webpack": "^5.3.1",
++    "webpack-cli": "^4.1.0"
   }
 }
 ```
@@ -127,9 +127,6 @@ _./webpack.config.js_
 ```javascript
 module.exports = {
   entry: ["./students.js"],
-  output: {
-    filename: "bundle.js"
-  }
 };
 ```
 
@@ -140,9 +137,6 @@ _./webpack.config.js_
 ```diff
 module.exports = {
   entry: ['./students.js'],
-  output: {
-    filename: 'bundle.js',
-  },
 + module: {
 +   rules: [
 +     {
@@ -196,12 +190,15 @@ _./index.html_
     <title>Webpack 4.x by sample</title>
   </head>
   <body>
-    Hello Webpack 4!
-    <script src="./dist/bundle.js"></script>
+    Hello Webpack!
+    <script src="./dist/main.js"></script>
   </body>
 </html>
 ```
 
+> IMPORTANT: This is not the best way to include an HTML file and link it with webpack,
+> we will learn how to do this in a proper way later on.
+
 - Now we can click on the html file and see our small piece of code up and running.
 
 > **Note down** this is not the optimal solution, in next steps we will proper generate

diff --git a/03-bundling/01-webpack/02-boiler-plate/index.html b/03-bundling/01-webpack/02-boiler-plate/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Webpack 4.x by sample</title>
+    <title>Webpack by sample</title>
   </head>
   <body>
-    Hello Webpack 4!
-    <script src="./dist/bundle.js"></script>
+    Hello Webpack!
+    <script src="./dist/main.js"></script>
   </body>
 </html>
diff --git a/03-bundling/01-webpack/02-boiler-plate/package.json b/03-bundling/01-webpack/02-boiler-plate/package.json
@@ -11,11 +11,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.3.1",
+    "webpack-cli": "^4.1.0"
   }
 }
diff --git a/03-bundling/01-webpack/02-boiler-plate/webpack.config.js b/03-bundling/01-webpack/02-boiler-plate/webpack.config.js
@@ -1,15 +1,12 @@
 module.exports = {
   entry: ["./students.js"],
-  output: {
-    filename: "bundle.js"
-  },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: "babel-loader"
-      }
-    ]
-  }
+        loader: "babel-loader",
+      },
+    ],
+  },
 };
diff --git a/03-bundling/01-webpack/03-import/index.html b/03-bundling/01-webpack/03-import/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Webpack 4.x by sample</title>
+    <title>Webpack by sample</title>
   </head>
   <body>
-    Hello Webpack 4!
-    <script src="./dist/bundle.js"></script>
+    Hello Webpack !
+    <script src="./dist/main.js"></script>
   </body>
 </html>
diff --git a/03-bundling/01-webpack/03-import/package.json b/03-bundling/01-webpack/03-import/package.json
@@ -11,11 +11,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.3.1",
+    "webpack-cli": "^4.1.0"
   }
 }
diff --git a/03-bundling/01-webpack/03-import/students.js b/03-bundling/01-webpack/03-import/students.js
@@ -1,5 +1,6 @@
-import { getAvg } from "./averageService";
+import { getAvg } from './averageService';
 
+// Let's use some ES6 features
 const scores = [90, 75, 60, 99, 94, 30];
 const averageScore = getAvg(scores);
 const messageToDisplay = `average score ${averageScore}`;

diff --git a/03-bundling/01-webpack/03-import/webpack.config.js b/03-bundling/01-webpack/03-import/webpack.config.js
@@ -1,15 +1,12 @@
 module.exports = {
   entry: ["./students.js"],
-  output: {
-    filename: "bundle.js"
-  },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: "babel-loader"
-      }
-    ]
-  }
+        loader: "babel-loader",
+      },
+    ],
+  },
 };
diff --git a/03-bundling/01-webpack/04-server/README.md b/03-bundling/01-webpack/04-server/README.md
@@ -44,7 +44,7 @@ npm install webpack-dev-server --save-dev
 ```diff
   "scripts": {
 -   "start": "webpack --mode development"
-+   "start": "webpack-dev-server --mode development --open",
++   "start": "webpack serve",
 +   "build": "webpack --mode development"
   },
 ```
@@ -53,7 +53,6 @@ npm install webpack-dev-server --save-dev
   _dist_ folder, right now we will make a workaround, update the path on the index.html file for the _bundle.js_
   file, in later samples we will learn a better way to reference the bundled files into HTML (using HTMLWebpackPlugin)
 
-
 _index.html_
 
 ```diff
@@ -67,8 +66,8 @@ _index.html_
   </head>
   <body>
     Hello Webpack 4!
--    <script src="./dist/bundle.js"></script>
-+    <script src="bundle.js"></script>
+-    <script src="./dist/main.js"></script>
++    <script src="main.js"></script>
   </body>
 </html>
 

diff --git a/03-bundling/01-webpack/04-server/index.html b/03-bundling/01-webpack/04-server/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Webpack 4.x by sample</title>
+    <title>Webpack by sample</title>
   </head>
   <body>
-    Hello Webpack 4!
-    <script src="bundle.js"></script>
+    Hello Webpack !
+    <script src="main.js"></script>
   </body>
 </html>
diff --git a/03-bundling/01-webpack/04-server/package.json b/03-bundling/01-webpack/04-server/package.json
@@ -4,19 +4,20 @@
   "description": "In this sample we are going to setup a web project that can be easily managed by webpack.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development --open",
-    "build": "webpack --mode development"
+    "start": "webpack serve",
+    "build": "webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.3.1",
+    "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
   }
 }
diff --git a/03-bundling/01-webpack/04-server/students.js b/03-bundling/01-webpack/04-server/students.js
@@ -1,5 +1,6 @@
-import { getAvg } from "./averageService";
+import { getAvg } from './averageService';
 
+// Let's use some ES6 features
 const scores = [90, 75, 60, 99, 94, 30];
 const averageScore = getAvg(scores);
 const messageToDisplay = `average score ${averageScore}`;

diff --git a/03-bundling/01-webpack/04-server/webpack.config.js b/03-bundling/01-webpack/04-server/webpack.config.js
@@ -1,15 +1,12 @@
 module.exports = {
   entry: ["./students.js"],
-  output: {
-    filename: "bundle.js"
-  },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: "babel-loader"
-      }
-    ]
-  }
+        loader: "babel-loader",
+      },
+    ],
+  },
 };
diff --git a/03-bundling/01-webpack/05-output/package.json b/03-bundling/01-webpack/05-output/package.json
@@ -4,20 +4,21 @@
   "description": "In this sample we are going to setup a web project that can be easily managed by webpack.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development --open",
-    "build": "webpack --mode development"
+    "start": "webpack serve",
+    "build": "webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "babel-loader": "^8.1.0",
-    "html-webpack-plugin": "^4.4.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
+    "html-webpack-plugin": "^4.5.0",
+    "webpack": "^5.3.1",
+    "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
   }
 }
diff --git a/03-bundling/01-webpack/05-output/students.js b/03-bundling/01-webpack/05-output/students.js
@@ -1,5 +1,6 @@
-import { getAvg } from "./averageService";
+import { getAvg } from './averageService';
 
+// Let's use some ES6 features
 const scores = [90, 75, 60, 99, 94, 30];
 const averageScore = getAvg(scores);
 const messageToDisplay = `average score ${averageScore}`;

diff --git a/03-bundling/01-webpack/05-output/webpack.config.js b/03-bundling/01-webpack/05-output/webpack.config.js
@@ -2,24 +2,21 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
   entry: ["./students.js"],
-  output: {
-    filename: "bundle.js"
-  },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: "babel-loader"
-      }
-    ]
+        loader: "babel-loader",
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
-    })
-  ]
+      hash: true,
+    }),
+  ],
 };
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		console.log("Look ma! Zero config");
		console.log("Look ma! Zero config");