Merge pull request #17 from udaypydi/feat/image-loader

Feat/image loader

Author: udaypydi

config/assetsMock.js

@@ -0,0 +1 @@
+module.exports = ''; 

config/webpack.dev.config.js

@@ -31,7 +31,15 @@ module.exports = {
             {
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader'],
-            }
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                  {
+                    loader: 'file-loader',
+                  },
+                ],
+            },
         ]
     },
     plugins: [

config/webpack.prod.config.js

@@ -32,7 +32,15 @@ module.exports = {
             {
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader'],
-            }
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                  {
+                    loader: 'file-loader',
+                  },
+                ],
+            },
         ]
     },
     plugins: [

jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
   clearMocks: true,
   coverageDirectory: "coverage",
   moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/assetsMock.js",
     "\\.(css|less|scss)$": "identity-obj-proxy"
   },
   testEnvironment: "jsdom",

package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.1",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.3.0",

src/__tests__/__snapshots__/app.spec.js.snap

@@ -5,7 +5,16 @@ exports[`should take a snapshot 1`] = `
   <div
     class="App--Container"
   >
-    Welcome to React Boilerplate!
+    <p
+      class="App--Title"
+    >
+      Welcome To React Boilerplate
+    </p>
+    <img
+      alt="React Logo"
+      class="App--Image"
+      src=""
+    />
   </div>
 </DocumentFragment>
 `;

src/app.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import logo from './logo.png';
 import './app.scss';
 
 export default function App() {
   return (
-    <div className="App--Container">Welcome to React Boilerplate!</div>
+    <div className="App--Container">
+      <p className="App--Title">Welcome To React Boilerplate</p>
+      <img src={logo} alt="React Logo" className="App--Image" />
+    </div>
   );
 }

src/app.scss

@@ -1,9 +1,28 @@
-$bg-color: grey;
+$bg-color: #282b33;
 $txt-color: white;
+$primary-color: #61dbfc;
+
+body {
+    margin: 0px;
+}
 
 .App--Container {
     display: flex;
     flex: 1;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
     background: $bg-color;
     color: $txt-color;
-}
+    padding: 0;
+    margin: 0;
+    color: $primary-color;
+
+    .App--Image {
+        height: 200px;
+    }
+
+    .App--Title {
+        font-size: 2rem;
+    }
+}

src/logo.png

@@ -3712,6 +3712,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -5489,6 +5497,15 @@ loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"