assembler-institute · AntonioCopete · Sep 7, 2021 · Sep 7, 2021 · Sep 7, 2021 · Sep 7, 2021
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/README.md b/README.md
@@ -1,38 +1,15 @@
 `#html` `#css` `#sass` `#javascript` `#webpack` `#es6` `#master-in-software-engineering`
 
-# WebPack Basics <!-- omit in toc -->
+# WebPack Basics 
+We built a JS bundle thanks to webpack, using "entry" and "output", This bundle was built
+from main.js wich imported modules a and b, we also imported main.scss. The css bundle were 
+deployed from scss files using MiniCssExtractPlugin, css-loader and sass-loader.
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+The HtmlWebpackPlugin was used to create the index.html into ./dist with linked js and css bundles.
 
-> 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.
+To load images, we installed the file-loader and created a module for different image
+formats. We used after the ImageMinimizerPlugin to compress images.
 
-## 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'>
 
 ## Technologies used
 
@@ -48,14 +25,18 @@ To create a fork on GitHub is as easy as clicking the “fork” button on the r
 
 \* ES6
 
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
 
 ## Resources
 
 
 - [WebPack Official](https://webpack.js.org/)
 - [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+
+## Authors
+
+- [@AntonioCopete](https://github.com/AntonioCopete)
+- [@e-hidalgo](https://github.com/e-hidalgo)
+
+
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!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.0" />
+    <title>Webpack Pill</title>
+  </head>
+  <body>
+    <p id="arrow" class="text-big">Click to change color</p>
+
+    <div>
+      <img src="src/img/skeleton-typing.gif" alt="skeleton_muerto" />
+      <img src="src/img/pexels-photo-1388030.jpeg" alt="baaaarcelooooona" />
+      <img src="src/img/red-mundial.png" alt="logo_Webpack" />
+      <img src="src/img/thinking.svg" alt="thinking" />
+    </div>
+  </body>
+</html>