Webpack graphics optim

kacperwalter · Mar 13, 2021 · 622682c · 622682c
1 parent 01b00b6
commit 622682c
Show file tree

Hide file tree

Showing 7 changed files with 2,156 additions and 13 deletions.
diff --git a/JS/samuraj-programowania/nodejs/webpack4/build/images/zdjecieefee9d.png b/JS/samuraj-programowania/nodejs/webpack4/build/images/zdjecieefee9d.png
diff --git a/JS/samuraj-programowania/nodejs/webpack4/build/index.html b/JS/samuraj-programowania/nodejs/webpack4/build/index.html
@@ -0,0 +1,22 @@
+<!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>Webpack4</title>
+<link href="main-c37d5cbdd79a99217bb9.css" rel="stylesheet"></head>
+<body>
+
+    <h1>Nasza strona</h1>
+
+    <div class="test-div">No siemaneczko</div>
+
+    <div class="lst"></div>
+
+    <img src="images/GHM.png" alt="">
+
+    <footer>Stopka</footer>
+
+<script type="text/javascript" src="js/e1d2e2.main.js"></script></body>
+</html>
diff --git a/JS/samuraj-programowania/nodejs/webpack4/build/js/e1d2e2.main.js b/JS/samuraj-programowania/nodejs/webpack4/build/js/e1d2e2.main.js
diff --git a/JS/samuraj-programowania/nodejs/webpack4/build/main-c37d5cbdd79a99217bb9.css b/JS/samuraj-programowania/nodejs/webpack4/build/main-c37d5cbdd79a99217bb9.css
@@ -0,0 +1,2 @@
+body{background-color:cadetblue;font-family:Arial, Helvetica, sans-serif}body img{max-width:300px}footer{display:flex;align-items:center;justify-content:center;background-color:#fff;background-image:url(images/zdjecieefee9d.png);color:black;height:80px}
+
diff --git a/JS/samuraj-programowania/nodejs/webpack4/config/webpack.config.prod.js b/JS/samuraj-programowania/nodejs/webpack4/config/webpack.config.prod.js
@@ -34,13 +34,26 @@ const webpackConfig = {
             },
             {
                 test: /\.(jpg|png|svg|gif|jpeg)$/,
-                loader: 'file-loader',
-                options: {
-                    name: '[name][contenthash:6].[ext]',
-                    outputPath: 'images',
-                    // publicPath - gdzie mają być szukane zdjęcia
-                    // publicPath: '../images',
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name][contenthash:6].[ext]',
+                        outputPath: 'images',
+                        // publicPath - gdzie mają być szukane zdjęcia
+                        // publicPath: '../images',
                 }
+                }, {
+                    // optymalizacja grafik
+                    // https://www.npmjs.com/package/image-webpack-loader
+                    loader: 'image-webpack-loader',
+                    options: {
+                        mozjpeg: { 
+                            quality: 70,
+                            progressive: true,
+                        }
+                    }
+                }],
+
             }
         ],
     },