Solution: Adrián Sánchez Guerrero

.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules

README.md

@@ -6,33 +6,16 @@
   <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.
 
 ## Index <!-- omit in toc -->
 
-- [Requirements](#requirements)
-- [Repository](#repository)
 - [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
 - [Resources](#resources)
-
-## Requirements
-
-- 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
-
-
-## Repository
-
-First of all you must fork this project into your GitHub account.
-
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
-
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+- [Setup](#setup)
+- [Run](#run)
 
 ## Technologies used
 
@@ -44,18 +27,68 @@ To create a fork on GitHub is as easy as clicking the “fork” button on the r
 
 \* SASS
 
-\* webpack
+\* Webpack
 
 \* ES6
 
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
+\* Babel
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+\* Imagemin
 
 ## Resources
 
-
-- [WebPack Official](https://webpack.js.org/)
+- [Webpack Official](https://webpack.js.org/)
 - [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+
+## Setup
+
+This section is meant to explain the process followed to install webpack and the specific plugins used for this project.
+ - First, install the required packages that are specified in the _*package.json_* file running the below _*npm*_ command. This will create the _node_modules_ folder with all the environment dependencies.
+
+ ```` npm install npm init -y ````
+
+ - For this environment, __webpack__, __webpack-cli__ and __webpack-dev-server__ has been configured as development dependencies. Moreover, it has been required to use the following plugins and modules to fulfill the project requirements: 
+
+ # Plugins:
+
+ 1. The Webpack's built-in **ProvidePlugin** has been used to import automatically jQuery when the __$__ or __jQuery__ variables are parsed.
+
+ 2. **HtmlWebpackPlugin** has been used to generate the _index.html_ file for the _dist_ bundle folder, using the _index.html_ file located in the _src_ folder as a template. It generates an HTML5 file that includes all your webpack bundles in the body using script tags. To install this plugin manually, the next command must be run:
+
+```` npm install --save-dev html-webpack-plugin ````
+
+ 3. **ImageMinimizerPlugin** has been used to generated compressed images in the _src/images_ folder. To install manually this plugin  and some other required tools for different files formats, the next command must be run:
+
+ ```` npm install --save-dev imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo ````
+
+ 4. **CssMinimizerWebpackPlugin** has been used to minimize CSS which is generated by the **css-loader** and **sass-loader**. To install this plugin manually, the next command must be run:
+
+```` npm install --save-dev css-minimizer-webpack-plugin ````
+
+5. **MiniCssExtractPlugin** has been used to generate a CSS file in _dist/styles_ folder as _main.css_, and make an import from the _index.html_ file. To install this plugin manually, the next command must be run:
+
+```` npm install --save-dev mini-css-extract-plugin ````
+
+ # Loaders:
+
+ 1. **html-loader** to parse the HTML as a string. It's required to load referenced images for the bundle.
+
+ ```` npm install --save-dev html-loader ````
+
+ 2. **css-loader** and **sass-loader** to parse and load the style code for the _index.html_ file in the _dist_ folder. 
+
+ ```` npm install --save-dev sass sass-loader  ````
+
+ 3. **babel-loader** to transpile _JavaScript_ files for the _index.html_ file in the _dist_ folder.
+
+ ```` npm install --save-dev babel-loader @babel/core @babel/preset-env webpack ````
+
+# Modules:
+
+**Asset Module** is used to load all image related type of files for the _dist_ folder.
+
+ ## Run
+
+ Some commands have been configured for _npm_, which can be used once all depencies had been installed:
+ - Run ````npm run build```` to build a bundle from _src_ folder. It will create (by default) the _dist_ `folder with the bundled files.
+ - Run ````npm start```` to launch a live web server with automatic reloading, so that every time changes are made the _src_ files will be recompiled.

imagemin.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+	mozjpeg: {
+		progressive: true,
+		quality: 50,
+	},
+	pngquant: {
+		speed: 8,
+		quality: [0.3, 0.5],
+		strip: true,
+	},
+	gifsicle: {
+		optimizationLevel: 3,
+		interlaced: true,
+		colors: 256,
+	},
+	svgo: {
+		name: "preset-default",
+		params: {
+			overrides: {
+				removeViewBox: {
+					active: false,
+				},
+				addAttributesToSVGElement: {
+					params: {
+						attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
+					},
+				},
+			},
+		},
+	},
+};