Solution: Nacho Peinado Montoya, Brahim Benalia

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+

README.md

@@ -6,13 +6,20 @@
   <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
 </p>
 
-> WebPack is a tool that allows you to manage the resources and dependencies of a website. 
+> WebPack is a tool that allows you to manage the resources and dependencies of a website.
 >
 > It mainly solves Javascript dependencies, although it can also work with css, images, Javascript preprocessors, CSS preprocessors, template systems, and much more.
+>
+> Here you'll find a src folder which contains the main files used to create the website and a dist folder with the result of having used Webpack.
 
 ## Index <!-- omit in toc -->
 
 - [Requirements](#requirements)
+- [Getting started](#getting-started)
+- [Approach1: Javascript](#approach-1-using-javascript-with-webpack)
+- [Approach2: Css & Sass](#Approach-2-Using-Sass-with-Webpack)
+- [Approach3: Images](#Approach-3-loading-images-with-webpack)
+- [Approach4: Css & Sass](#Approach-4-Injecting-HTML-with-webpack)
 - [Repository](#repository)
 - [Technologies used](#technologies-used)
 - [Project delivery](#project-delivery)
@@ -25,6 +32,159 @@
 - Verify that the output bundle generated by WebPack for the Javascript layer has made the transformation from ECMAScript 6 to ECMAScript 5
 - Create a clear and orderly directory structure
 
+## Getting started <!-- omit in toc -->
+
+First of all you should install Webpack and Webpack CLI. If you want to have an automatic reload of the result page made with Webpack, you should install the webpack server
+
+Install
+
+```
+npm install webpack webpack-cli # install the CLI
+npm install webpack-dev-server  # install the server
+```
+
+## Approach #1: Using Javascript with Webpack
+
+A main.js file that will be your main Javascript file responsible for calling the modules that your application needs.
+
+Inside the webpack.config.js, you must include:
+
+```Javascript
+const path = require("path");
+
+module.exports = {
+  entry: "./src/js/main.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+  },
+  mode: "production",
+}
+```
+
+A file called module-a.js that contains a javascript module that makes use of the new features of ECMAScript 6.
+
+A file called module-b.js that contains a javascript module that makes use of the JQuery library.
+
+First install jQuery:
+
+```
+npm install jquery
+```
+
+Then, configure webpack to load the jquery plugin:
+
+```Javascript
+const webpack = require("webpack");
+
+module.exports = {
+  ...
+  plugins: [
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery",
+      }),
+    ],
+}
+```
+
+## Approach #2: Using Sass with Webpack
+
+create 3 sass files to style come text:
+
+- colors.scss that applies the css style related to colors.
+- text.scss that applies the css style related to text.
+- main.scss which imports the colors.scss and text.scss files
+
+First, install css and sass loaders:
+
+```
+npm install style-loader css-loader
+npm install sass-loader sass webpack
+```
+
+Now configure the loaders already installed:
+
+```javascript
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  ...
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          "style-loader",
+          // Translates CSS into CommonJS
+          "css-loader",
+          // Compiles Sass to CSS
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+};
+```
+
+## Approach #3: loading images with webpack
+
+4 files have been created to load them with Webpack:
+
+1. Png image weighing less than 8kb
+2. Svg with a weight less than 8kb
+3. Png image with a weight greater than 12kb
+4. Image .jpg with a weight greater than 1MB
+
+You should convert image size less than 12kb and compress the rest of PNG, JPG, GIF and SVG images. To achieve that use the webpack configuration below:
+
+```javascript
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|svg)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 12000,
+            },
+          },
+        ],
+      },
+    ],
+  },
+```
+
+Now, you can use import to load the images:
+
+```javascript
+import small from "../img/small.png";
+```
+
+## Approach #4: Injecting HTML with webpack
+
+In this part you should create an index.html file that serves as an entry point to the application. It is necessary that this file automatically includes the assets generated.
+
+Once created, you install the following plugin to convert the index.html file:
+
+```
+npm install html-webpack-plugin
+```
+
+Then execute the npm run build command
+
+```javascript
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  ...
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+    }),
+  ],
+};
+```
 
 ## Repository
 
@@ -56,6 +216,5 @@ To deliver this project you must follow the steps indicated in the document:
 
 ## Resources
 
-
 - [WebPack Official](https://webpack.js.org/)
 - [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)

dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><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 Basics</title><link id="favicon" rel="shortcut icon" href="./img/png-transparent-react-logo-webpack-babel-javascript-npm-github-nodejs-front-and-back-ends.png" type="image/x-icon"/><script defer="defer" src="index.js"></script></head><body><header><div class="nav-ic">Webpack Basics</div><button id="source" class="neg">Source code</button></header><div id="source-div" class="div full-size"><h1 class="white">This is all the source code generated by Webpack</h1><h1 class="white">HTML:</h1><p id="html-text" class="text-s grey"></p><h1 class="white">JS:</h1><p id="js-text" class="text-s grey"></p></div><main><section><div class="js div"><h1>Javascript ES6</h1><button id="moda" class="btn">Click here to watch the code</button><div id="mod-a-div" class="text-mod"><p id="moda-p1" class="text-s white"></p><p id="moda-p2" class="text-s white"></p><p id="moda-p3" class="text-s white"></p><p class="text-s white">You can also watch the result of all of this on the console</p></div></div><div class="jq div"><h1>jQuery</h1><button id="modb" class="btn">Click here to watch the code</button><div id="mod-b-div" class="text-mod"><p id="modb-p1" class="text-s white"></p></div></div><div class="sass div"><h1>sass</h1><button id="modc" class="btn">Click here to watch the code</button><div id="mod-c-div" class="text-mod"><p id="modc-p1" class="text-s white"></p><p id="modc-p2" class="text-s white"></p></div></div></section><section><div class="p1 div"><p class="text-s">png less than 8Kb</p><div class="small-div"><img id="img1" class="img" src="" alt=""/></div></div><div class="p2 div"><p class="text-s">svg less than 8Kb</p><div class="small-div"><img id="img2" class="img" src="" alt=""/></div></div><div class="p3 div"><p class="text-s">png greater than 12Kb</p><div class="small-div"><img id="img3" class="img" src="" alt=""/></div></div><div class="p4 div"><p class="text-s">jpg greater than 1Mb</p><div class="small-div"><img id="img4" class="img" src="" alt=""/></div></div></section></main></body></html>

dist/index.js.LICENSE.txt

@@ -0,0 +1,24 @@
+/*!
+ * Sizzle CSS Selector Engine v2.3.6
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2021-02-16
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.0
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2021-03-02T17:08Z
+ */