Solution: Eunyoung Kim & Jordi Arnau

.babelrc

@@ -0,0 +1,5 @@
+{
+"presets": [
+    "@babel/preset-env"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules/

README.md

@@ -1,61 +1,62 @@
 `#html` `#css` `#sass` `#javascript` `#webpack` `#es6` `#master-in-software-engineering`
 
-# WebPack Basics <!-- omit in toc -->
+<h1 align="center">Hi 👋, we are Eunyoung Kim and Jordi Arnau</h1>
+<h3 align="center">We are exploring the incredible world of Webpack!</h3>
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+# WebPack Basics <!-- omit in toc -->
 
-> 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.
+> We are using WebPack to create a Front End environment that we will be able to use in future projects.
 
 ## Index <!-- omit in toc -->
 
-- [Requirements](#requirements)
-- [Repository](#repository)
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+- [Running the virtual server](#running-the-virtual-server)
 - [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+- [Authors](#authors)
 
-## Requirements
+## Prerequisites
 
-- 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
+Need to install globally:
 
+- npm package manager
 
-## Repository
+## Getting started
 
-First of all you must fork this project into your GitHub account.
+You only need to run npm to get all the necessary dependencies:
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+```
+npm install
+```
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+## Running the virtual server
 
-## Technologies used
+To see the result of the project you can run:
 
-\* HTML
+```
+npx webpack server
+```
+
+## Technologies used
 
-\* CSS
+<a href="https://babeljs.io/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg" alt="babel" width="40" height="40"/> </a><br>
 
-\* JS
+<a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a><br>
 
-\* SASS
+<a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a><br>
 
-\* webpack
+<a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/></a><br>
 
-\* ES6
+<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a><br>
 
-## Project delivery
+<a href="https://nodejs.org" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg" alt="nodejs" width="40" height="40"/> </a><br>
 
-To deliver this project you must follow the steps indicated in the document:
+<a href="https://sass-lang.com" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg" alt="sass" width="40" height="40"/> </a><br>
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+<a href="https://webpack.js.org/" target="_blank"> <img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png" alt="webpack" width="40" height="40"/> </a><br>
 
-## Resources
+## Authors
 
+Eunyoung Kim - https://github.com/solaz0824
 
-- [WebPack Official](https://webpack.js.org/)
-- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+Jordi Arnau - https://github.com/JordixArnau

dist/index.html

@@ -0,0 +1,20 @@
+<!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 basics</title>
+  <script defer src="my-first-webpack.bundle.js"></script><link href="main.css" rel="stylesheet"></head>
+  <body>
+    <div><img src="143f9ab41ce0e9f17c61.jpg" alt="Melody" /></div>
+    <p>I'm Melody</p>
+    <div><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDY0IDY0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZhYjAwO30uY2xzLTJ7ZmlsbDojZWZjNTg5O30uY2xzLTN7ZmlsbDojM2UyYzI3O30uY2xzLTR7ZmlsbDojYmQ3ZjAwO30uY2xzLTV7ZmlsbDojMmQyZDJkO308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGlkPSJnaXJhZmZlIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00NywyN3Y1TDQxLDUxdjRhNiw2LDAsMCwxLTYsNkgyOWE2LDYsMCwwLDEtNi02VjUxTDE3LDMyVjI3YzAtLjI2LDAtLjUyLDAtLjc4QTEzLjg2LDEzLjg2LDAsMCwxLDE4Ljg4LDIwYTE0LjE1LDE0LjE1LDAsMCwxLDIuODYtMy40OSwzLDMsMCwwLDAsLjI1LS4yNUEzLjk0LDMuOTQsMCwwLDAsMjIuNjUsMTJMMjEuMzIsOWMtLjExLDAtLjIxLDAtLjMyLDBhMywzLDAsMSwxLC40Mi02QTMsMywwLDAsMSwyMy45LDUuMjYsMi45NCwyLjk0LDAsMCwxLDI0LDYuNDNhNCw0LDAsMCwwLC4yMywyLjI2bDEuMjMsMi43OGEzLDMsMCwwLDAsMy4yMiwxLjczQTEzLjI5LDEzLjI5LDAsMCwxLDMwLjIxLDEzaDMuNThhMTMuMjksMTMuMjksMCwwLDEsMS41Ni4xNywzLDMsMCwwLDAsMy4yMi0xLjczbDEuMTktMi42OUE0LjM2LDQuMzYsMCwwLDAsNDAsNi4zOCwyLjM0LDIuMzQsMCwwLDEsNDAsNmEzLDMsMCwxLDEsMywzYy0uMTEsMC0uMjEsMC0uMzIsMGwtMS4zMywzQTMuOTQsMy45NCwwLDAsMCw0MiwxNi4yNmwuMjUuMjVBMTQuMTUsMTQuMTUsMCwwLDEsNDUuMTIsMjAsMTMuODYsMTMuODYsMCwwLDEsNDcsMjYuMjJDNDcsMjYuNDgsNDcsMjYuNzQsNDcsMjdaIi8+PHJlY3QgY2xhc3M9ImNscy0yIiBoZWlnaHQ9IjE0IiByeD0iNiIgcnk9IjYiIHdpZHRoPSIxOCIgeD0iMjMiIHk9IjQ3Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjksNTZhMSwxLDAsMCwxLTEtMVY1M2ExLDEsMCwwLDEsMiwwdjJBMSwxLDAsMCwxLDI5LDU2WiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTM1LDU2YTEsMSwwLDAsMS0xLTFWNTNhMSwxLDAsMCwxLDIsMHYyQTEsMSwwLDAsMSwzNSw1NloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01NywyOUg1NWExMi45MSwxMi45MSwwLDAsMS04LTIuNzhBMTMuODYsMTMuODYsMCwwLDAsNDUuMTIsMjBhMTQuMTUsMTQuMTUsMCwwLDAtMi44Ni0zLjQ5TDQyLDE2LjI2QTIuMjYsMi4yNiwwLDAsMSw0MiwxNmgyQTEzLDEzLDAsMCwxLDU3LDI5WiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTIyLDE2YTIuMjYsMi4yNiwwLDAsMSwwLC4yNiwzLDMsMCwwLDEtLjI1LjI1QTE0LjE1LDE0LjE1LDAsMCwwLDE4Ljg4LDIwLDEzLjg2LDEzLjg2LDAsMCwwLDE3LDI2LjIyLDEyLjkxLDEyLjkxLDAsMCwxLDksMjlIN0ExMywxMywwLDAsMSwyMCwxNloiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNSIgY3g9IjM4LjUiIGN5PSIzMi41IiByPSIxLjUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNSIgY3g9IjI1LjUiIGN5PSIzMi41IiByPSIxLjUiLz48L2c+PC9zdmc+" alt="Rob" /></div>
+    <p id="giraffeName"></p>
+    <div><img src="data:image/png;base64,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" alt="Snowball" /></div>
+    <p id="dogName"></p>
+    <h1>Hola mundo!</h1>
+    <div><img src="69d1f429170768f35b1f.png" alt="Hola mundo Zombie" /></div>
+    <button id="btn">Click me!!!</button>
+  </body>
+</html>

dist/main.css

@@ -0,0 +1,29 @@
+@import url(https://fonts.googleapis.com/css2?family=Lobster&display=swap);
+body {
+  font-family: "Lobster", cursive;
+  font-size: 1rem;
+}
+
+body {
+  padding: 25px;
+  text-align: center;
+  color: #5b5b63;
+  background-color: #93c5ba;
+}
+
+#btn {
+  background-color: #5b5bff;
+}
+
+img[alt=Rob] {
+  height: 100px;
+}
+
+img[alt=Melody] {
+  height: 200px;
+}
+
+img[alt="Hola mundo Zombie"] {
+  height: 200px;
+}
+