frontend-lessons · temple · Apr 24, 2020 · Apr 24, 2020 · Apr 24, 2020 · Apr 26, 2020
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Frontend Lessons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -7,4 +7,5 @@ Cómo crear un proyecto [webpack](https://webpack.js.org/) **esencial**
 - **CAPÍTULO 3**: Uso de require en webpack.config.js ([LEER](doc/charpter-03.md))
 - **CAPÍTULO 4**: Uso de plugins en webpack.config.js ([LEER](doc/charpter-04.md))
 - **CAPÍTULO 5**: Uso combinado de plugins en webpack.config.js ([LEER](doc/charpter-05.md))
-- **CAPÍTULO 6**: Uso de loaders para CSS en webpack.config.js ([LEER](doc/charpter-06.md))
+- **CAPÍTULO 6**: Uso de loaders para CSS en webpack.config.js ([LEER](doc/charpter-06.md))
+- **CAPÍTULO 7**: Uso de loaders para assets en webpack.config.js ([LEER](doc/charpter-07.md))
diff --git a/config/webpack/webpack.module.js b/config/webpack/webpack.module.js
@@ -1,4 +1,29 @@
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const FILE_LOADER = {
+  loader: "file-loader",
+  options: {
+    name: "[contenthash].[ext]",
+    outputPath: "/css/img/",
+  }
+}
+
+const URL_LOADER = {
+  loader: "url-loader",
+  options:{
+    fallback: FILE_LOADER,
+    limit: 32768  
+  }
+}
+
+const SVG_URL_LOADER = {
+  loader: "svg-url-loader",
+  options: {
+    stripdeclarations:true,
+    limit: 32768,    
+  }
+}
+
 module.exports = { 
   unknownContextRequest: ".",
   unknownContextRecursive: true,
@@ -10,23 +35,27 @@ module.exports = {
   wrappedContextRecursive: true,
   rules: [
     {
-      test: /\.html/,
-      loader: "html-loader"
+      test: /\.html/,      
+      loader: "html-loader",
+      options: {
+        minimize: {
+          removeAttributeQuotes: false
+        }
+      }
     },
     {
       test: /\.s?[ac]ss$/,
       use: [MiniCssExtractPlugin.loader,"css-loader","sass-loader"],
     },
     {
       test: /\.(png|svg)$/,
-      use: [
+      oneOf: [
+        Object.assign(URL_LOADER,{issuer:/index\.js$/,test:/\.png$/}),
         {
-          loader: "file-loader",
-          options: {
-            name: "[contenthash].[ext]",
-            outputPath: "/css/img/",
-          }
-        }
+          test: /\.svg$/,
+          loader:SVG_URL_LOADER
+        },
+        FILE_LOADER,
       ]
     },
   ]

diff --git a/dist/css/img/3b7bf087cbac835e6f7d4b7dc9711e72.png b/dist/css/img/3b7bf087cbac835e6f7d4b7dc9711e72.png
diff --git a/dist/css/style.d35b7021c9d05c436962.css → dist/css/style.23050be246d85665d8e5.css b/dist/css/style.d35b7021c9d05c436962.css → dist/css/style.23050be246d85665d8e5.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.d35b7021c9d05c436962.css" rel="stylesheet"></head> <body class=has-text-centered> <div class=columns> <div class=column><span class="emoji emoji-1"></span></div> <div class=column><span class="emoji emoji-2"></span></div> <div class=column><span class="emoji emoji-3"></span></div> </div> <main id=main class=container> <img id=logo src=/css/img/77af6108e8bb5a8ed55591c667b52337.svg alt=Loading> </main> <script src="main.js"></script></body> </html> 
+<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.23050be246d85665d8e5.css" rel="stylesheet"></head> <body class=has-text-centered> <div class=columns> <div class=column><span class="emoji emoji-1"></span></div> <div class=column><span class="emoji emoji-2"></span></div> <div class=column><span class="emoji emoji-3"></span></div> </div> <main id=main class=container> <img id=logo src=/css/img/77af6108e8bb5a8ed55591c667b52337.svg alt=Loading> </main> <script src="main.js"></script></body> </html> 
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/sitemap.html b/dist/sitemap.html
@@ -1 +1 @@
-<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.d35b7021c9d05c436962.css" rel="stylesheet"></head> <body> <script src="main.js"></script></body> </html> 
+<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.23050be246d85665d8e5.css" rel="stylesheet"></head> <body> <script src="main.js"></script></body> </html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.d35b7021c9d05c436962.css" rel="stylesheet"></head> <body class=has-text-centered> <div class=columns> <div class=column><span class="emoji emoji-1"></span></div> <div class=column><span class="emoji emoji-2"></span></div> <div class=column><span class="emoji emoji-3"></span></div> </div> <main id=main class=container> <img id=logo src=/css/img/77af6108e8bb5a8ed55591c667b52337.svg alt=Loading> </main> <script src="main.js"></script></body> </html>
		<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Mi primer proyecto Webpack</title> <link href="css/style.23050be246d85665d8e5.css" rel="stylesheet"></head> <body class=has-text-centered> <div class=columns> <div class=column><span class="emoji emoji-1"></span></div> <div class=column><span class="emoji emoji-2"></span></div> <div class=column><span class="emoji emoji-3"></span></div> </div> <main id=main class=container> <img id=logo src=/css/img/77af6108e8bb5a8ed55591c667b52337.svg alt=Loading> </main> <script src="main.js"></script></body> </html>