Handling fonts, images, css

332b6a33 · LEKMAD · 06f91e71 · 332b6a33 · 332b6a33 · 332b6a33
Commit 332b6a33 authored 4 years ago by LEKMAD
Hide whitespace changes
Inline Side-by-side

Showing

with 197 additions and 20 deletions
+197 -20
--- a/dist/2272039bdf537196e1c15f0f3b73ecad.woff
+++ b/dist/2272039bdf537196e1c15f0f3b73ecad.woff
--- a/dist/3fec4ac416ad4c77bdc68da08ed76659.png
+++ b/dist/3fec4ac416ad4c77bdc68da08ed76659.png
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/index.html
+++ b/dist/index.html
@@ -3,7 +3,9 @@
  <head>
    <title>Asset Management</title>  </head>
  <body>
+    <div id="nd"></div>
    <div id="iid"></div>
    <script src="bundle.js"></script>
+    
  </body>
 </html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -1045,6 +1045,38 @@
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
      "dev": true
    },
+    "csv-loader": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/csv-loader/-/csv-loader-3.0.3.tgz",
+      "integrity": "sha512-JMr83kH2sOFKbRO95fAQV1fLEc1Chx1osJpU7Gd5ZQhmXrsQN479P08sDuyZoO5LMiJ8IsR72Xtl/nSA7rh4Lw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "papaparse": "^5.2.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
    "cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -1445,6 +1477,49 @@
      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
      "dev": true
    },
+    "file-loader": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.0.tgz",
+      "integrity": "sha512-26qPdHyTsArQ6gU4P1HJbAbnFTyT2r0pG7czh1GFAd9TZbj0n94wWbupgixZH/ET/meqi2/5+F7DhW4OAXD+Lg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.7.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
    "fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -2409,6 +2484,12 @@
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
      "dev": true
    },
+    "papaparse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.0.tgz",
+      "integrity": "sha512-Lb7jN/4bTpiuGPrYy4tkKoUS8sTki8zacB5ke1p5zolhcSE4TlWgrlsxjrDTbG/dFVh07ck7X36hUf/b5V68pg==",
+      "dev": true
+    },
    "parallel-transform": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@@ -2876,6 +2957,12 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
    "schema-utils": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -3805,6 +3892,32 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
+    "xml-loader": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/xml-loader/-/xml-loader-1.2.1.tgz",
+      "integrity": "sha1-A0hNpxDETTYQ3TbCr0CUs1tPeXU=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "xml2js": "^0.4.16"
+      }
+    },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "dev": true,
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "dev": true
+    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

--- a/package.json
+++ b/package.json
@@ -12,9 +12,12 @@
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.3.0",
+    "csv-loader": "^3.0.3",
+    "file-loader": "^6.1.0",
    "style-loader": "^1.3.0",
    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "jquery": "^3.5.1",

--- a/src/Branda-yolq.woff
+++ b/src/Branda-yolq.woff
--- a/src/data.json
+++ b/src/data.json
+{
+    "name":"UJM",
+    "child":"TSE"
+}
\ No newline at end of file
--- a/src/icon.png
+++ b/src/icon.png
--- a/src/index.js
+++ b/src/index.js
-import _ from 'lodash';
-import './style.css';
+import _ from "lodash";
+import "./style.css";
+import Icon from "./icon.png";
+import data from './data.json';
+
+
 const $ = require("jquery");
-    var arr = [1,1,2,3,1,4,5,4];
-     console.log("newArr",[...new Set(arr)])
+
 function component() {
-    const element = document.createElement('div');
-    
-   // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-  
-    return element;
-  }
-  $("#iid").append("Panorama des langages de script - TD3 -")
-  document.body.appendChild(component());
\ No newline at end of file
+  const element = document.createElement("div");
+  element.classList.add("hello");
+
+  // Add the image to our existing div.
+  const myIcon = new Image();
+  myIcon.src = Icon;
+
+  element.appendChild(myIcon);
+  // Lodash, now imported by this script
+  element.innerHTML = _.join(["Hello", "webpack"], " ");
+
+
+
+  return element;
+}
+$("#nd").append(`University: ${data.name}, School: ${data.child}`);
+$("#iid").append(`Panorama des langages de script - TD3 -`);
+document.body.appendChild(component());
--- a/src/style.css
+++ b/src/style.css
-div {
-  color: red;
-  text-align: center;
+@font-face {
+    font-family: 'MyFont';
+    src:  url('./Branda-yolq.woff') format('woff');  
+    font-weight: 600;
+    font-style: normal;
+  }
+.hello{
+  color: rgb(16, 19, 212);
  vertical-align: middle;
  line-height: 90px;
+  font-family: 'MyFont';
+    background-color: rgb(226, 130, 51);
+    padding-top: 16px;
 }
+#iid{
+    padding: 30px;
+    text-align: center;
+    font-family: 'MyFont';
+}
+#nd{
+    background: url('./icon.png') no-repeat;
+    padding: 30px;
+    text-align: center;
+    font-family: 'MyFont';
+}
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,30 @@ const path = require('path');
              'css-loader',
            ],
          },
+          {
+            test: /\.(png|svg|jpg|gif)$/,
+            use: [
+              'file-loader',
+            ],
+          },
+          {
+            test: /\.(woff|woff2|eot|ttf|otf)$/,
+            use: [
+              'file-loader',
+            ],
+          },
+          {
+            test: /\.(csv|tsv)$/,
+            use: [
+              'csv-loader',
+            ],
+          },
+          {
+            test: /\.xml$/,
+            use: [
+              'xml-loader',
+            ],
+          },
        ],
      },
  };