Solution: Armando Vieira & Victor Hugo Gomez

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,61 +1,287 @@
 `#html` `#css` `#sass` `#javascript` `#webpack` `#es6` `#master-in-software-engineering`
 
-# WebPack Basics <!-- omit in toc -->
+# Webpack pill: Steps
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+## 1. Installing Webpack and webpack-dev-server
 
-> 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.
+```
+npm install -g webpack webpack-cli
+npm install webpack-dev-server
+```
 
-## Index <!-- omit in toc -->
+## 2. Forking and cloning root repository
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+From Assembler https://github.com/assembler-school/webpack-basics
 
-## Requirements
+## 3. Initializing project and creating package.json
 
-- You must make use of the new features of ECMAScript 6
-- You must import several files so that the final result is a single bundle for Javascript and a single bundle for sass
-- 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
+```
+npm init -y
+```
 
+## 4. Building src folder
 
-## Repository
+a) Creating main.js, our entrypoint.
 
-First of all you must fork this project into your GitHub account.
+b) Creating module-a.js and module-b.js, as ES6 and jQuery functionalities.
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+c) Creating main.scss using \_colors.scss and \_text.scss.
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+d) Creating index.html.
 
-## Technologies used
+e) Importing all of them into our entry point main.js
 
-\* HTML
+```
+// main.js
+import "./index.html";
+import "jquery";
+import "./module-a.js";
+import "./module-b.js";
+import "./main.scss";
+```
 
-\* CSS
+## 5. Initializing our webpack.config.js
 
-\* JS
+```
 
-\* SASS
+module.exports = {
+  mode: "development",
+  entry: "./src/app/main.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.js",
+  },
+};
+```
 
-\* webpack
+## 6. Installing HtmlWebpackPlugin and jQuery
 
-\* ES6
+Installing HtmlWebpackPlugin and adding it as plugin on our webpack.config.js
 
-## Project delivery
+```
+npm install --save-dev html-webpack-plugin
+```
 
-To deliver this project you must follow the steps indicated in the document:
+```
+// webpack.config.js
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery",
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/public/index.html",
+    }),
+  ]
+```
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+## 7. Installing SASS loader
 
-## Resources
+```
+npm install sass-loader sass webpack --save-dev
+```
 
+```
+// webpack.config.js
+  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",
+        ],
+      },
+    ],
+  },
+```
 
-- [WebPack Official](https://webpack.js.org/)
-- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+## 8. Compiling our webpack and checking results
+
+```
+npm run build
+```
+
+Then, we get a new folder called "dist", which contain our ouput bundle.js and index.html, opening index.html we should be able to see our modifications by JS and SASS.
+
+## 9. Managing images with webpack
+
+### 9.1 Importing images into our entry point
+
+```
+// main.js
+import "./pngsmall.png";
+import "./svgsmall.svg";
+import "./pngbig.png";
+import "./jpgbig.jpg";
+```
+
+```
+// index.html
+<div class="imgDiv">
+  <img src="./pngsmall.png" alt="" />
+  <img src="./svgsmall.svg" alt="" />
+  <img src="./pngbig.png" alt="" />
+  <img src="./jpgbig.jpg" alt="" />
+</div>
+```
+
+### 9.2 Installing html-loader and Assets manager
+
+```
+npm install --save-dev html-loader
+```
+
+Adding them into our webpack.config.js
+
+```
+// webpack.config.js
+module: {
+  rules: [
+    ...
+    {
+      test: /\.html$/i,
+      loader: "html-loader",
+    },
+    {
+      test: /\.(png|svg|jpg|jpeg|gif)$/i,
+      type: "asset",
+    },
+  ],
+},
+```
+
+### 9.3 Installing and adding ImageMinimizerPlugin
+
+First, we install ImageMinimizerPlugin:
+
+```
+npm install image-minimizer-webpack-plugin --save-dev
+```
+
+Installing lossless plugin for optimization
+
+```
+npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
+```
+
+Adding them into our webpack.config.js
+
+```
+// webpack.config.js
+plugins: [
+  ...
+  new ImageMinimizerPlugin({
+    minimizerOptions: {
+      // Lossless optimization with custom option
+      // Feel free to experiment with options for better result for you
+      plugins: [
+        "imagemin-gifsicle",
+        "imagemin-jpegtran",
+        "imagemin-optipng",
+        [
+          "imagemin-svgo",
+          {
+            plugins: [
+              {
+                removeViewBox: false,
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  }),
+],
+```
+
+### 9.4 Applying size filter
+
+In order to be able to filter actions depending of images size, we add a filter into the plugin:
+
+```
+// webpack.config.js
+plugins: [
+...
+new ImageMinimizerPlugin({
+  test: /\.(jpe?g|png|gif|svg)$/i,
+  filter: (source) => {
+    if (source.byteLength >= 8192) {
+      return true;
+      }
+        return false;
+    },
+    minimizerOptions: {
+      // Lossless optimization with custom option
+      // Feel free to experiment with options for better result for you
+      plugins: [
+        "imagemin-gifsicle",
+        "imagemin-jpegtran",
+        "imagemin-optipng",
+        [
+          "imagemin-svgo",
+          {
+            plugins: [
+              {
+                removeViewBox: false,
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  }),
+],
+
+```
+
+## 10. Compiling our webpack and checking results
+
+```
+npm run build
+```
+
+## 11. ECMAScript transformation
+
+In order to be able to make the transformation from ECMAScript 5 to ECMAScript 6, we use babel loader:
+
+```
+npm install -D babel-loader @babel/core @babel/preset-env webpack
+```
+
+```
+// webpack.config.js
+  module: {
+    rules: [
+      ...
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+    ],
+  },
+```
+
+# Resources:
+
+https://webpack.js.org/plugins/html-webpack-plugin/
+
+https://webpack.js.org/loaders/sass-loader/
+
+https://webpack.js.org/loaders/html-loader/
+
+https://webpack.js.org/guides/asset-management/
+
+https://www.npmjs.com/package/image-minimizer-webpack-plugin
+
+https://webpack.js.org/loaders/babel-loader/