assembler-institute · Jose1i1o · Sep 8, 2021 · Sep 9, 2021
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"] //por las clases para q lo transpile
+  }
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/dist/js/30145aa93aff34725c28.svg b/dist/js/30145aa93aff34725c28.svg
diff --git a/dist/js/8117203ade69477e93f5.png b/dist/js/8117203ade69477e93f5.png
diff --git a/dist/js/8f9e0834f7335b328fd0.jpg b/dist/js/8f9e0834f7335b328fd0.jpg
diff --git a/dist/js/967865ebd39eb2271bc1.png b/dist/js/967865ebd39eb2271bc1.png
diff --git a/dist/js/b34d7c90731f710532ee.png b/dist/js/b34d7c90731f710532ee.png
diff --git a/dist/js/bundle.js b/dist/js/bundle.js
diff --git a/dist/js/index.html b/dist/js/index.html
@@ -0,0 +1,79 @@
+<!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>
+    <link id="favicon" rel="shortcut icon" href="./img/webpack.png" type="image/x-icon" />
+<script defer src="bundle.js"></script></head>
+
+<body class="main-container">
+    <main>
+        <section class="upper-container">
+            <div class="headerdiv p0">
+                <button id="source" class="neg">Source code</button>
+                <div id="source-div" class="div full-size">
+                    <h1 class="text-coral">This is code generated by Webpack</h1>
+                    <h1 class="text-coral">HTML:</h1>
+                    <p id="html-text" class="text-source"></p>
+                    <h1 class="text-coral">JS:</h1>
+                    <p id="js-text" class="text-source"></p>
+                </div>
+            </div>
+            <div class="js div">
+                <h1>Javascript ES6</h1>
+                <button id="mode" class="btn">Click here to watch the code</button>
+                <div id="mod-a-div" class="text-mod">
+                    <p id="mode-p1" class="text-white"></p>
+                    <p id="mode-p2" class="text-white"></p>
+                    <p id="mode-p3" class="text-white"></p>
+                    <p class="text-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-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-white"></p>
+                    <p id="modc-p2" class="text-white"></p>
+                </div>
+            </div>
+            <!-- <div class="p1 div">
+                <h1>png &lt; 8Kb</h1>
+                <button id="modd" onclick="picture()" class="btn">Click here to see the image</button>
+                <div id="mod-b-div" class="text-mod">
+                    <img id="img1" class="div__img--fit" src="" alt="" />
+                </div>
+            </div> -->
+            <div class="p1 small-container">
+                <p class="text-s">png &lt; 8Kb</p>
+                <img id="img1" class="div__img--fit" src="" alt="" />
+            </div>
+            <div class="p2 small-container">
+                <p class="text-s">svg &lt; than 8Kb</p>
+                <img id="img2" class="div__img--fit" src="" alt="" />
+            </div>
+            <div class="p3 small-container">
+                <p class="text-s">png &gt; than 12Kb</p>
+                <img id="img3" class="div__img--fit" src="" alt="" />
+            </div>
+            <div class="p4 small-container">
+                <p class="text-s">jpg &gt; than 1Mb</p>
+                <img id="img4" class="div__img--fit" src="" alt="" />
+            </div>
+        </section>
+    </main>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,43 @@
+{
+    "name": "webpack-basics",
+    "version": "1.0.0",
+    "description": "`#html` `#css` `#sass` `#javascript` `#webpack` `#es6`",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "webpack",
+        "start": "webpack serve"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Jose1i1o/webpack-basics.git"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/Jose1i1o/webpack-basics/issues"
+    },
+    "homepage": "https://github.com/Jose1i1o/webpack-basics#readme",
+    "devDependencies": {
+        "@babel/core": "^7.15.5",
+        "@babel/preset-env": "^7.15.4",
+        "babel-loader": "^8.2.2",
+        "css-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.2",
+        "image-minimizer-webpack-plugin": "^2.2.0",
+        "imagemin-gifsicle": "^7.0.0",
+        "imagemin-mozjpeg": "^9.0.0",
+        "imagemin-pngquant": "^9.0.2",
+        "imagemin-svgo": "^9.0.0",
+        "jquery": "^3.6.0",
+        "node-sass": "^6.0.1",
+        "sass": "^1.39.0",
+        "sass-loader": "^12.1.0",
+        "style-loader": "^3.2.1",
+        "webpack": "^5.52.0",
+        "webpack-cli": "^4.8.0",
+        "webpack-dev-server": "^4.1.1"
+    },
+    "dependencies": {}
+}
diff --git a/src/css/_colors.scss b/src/css/_colors.scss
@@ -0,0 +1,11 @@
+$bg: #000000;
+$btn: rgb(205, 101, 101);
+$font: #262626;
+$black: #000000;
+$jquery: #93d1ac;
+$bluesass: rgb(81, 116, 206);
+$js: rgb(255, 182, 18);
+$purple: #8965dd;
+$orange: #fd5b2a;
+$pink: #fa9cbe;
+$header: #38424E;