load images.

6 files changed, 82 insertions, 0 deletions

diff --git a/package-lock.json b/package-lock.json
index 930c423..77ded29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2309,6 +2309,29 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+      "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -7343,6 +7366,36 @@
       "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=",
       "dev": true
     },
+    "url-loader": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.1.tgz",
+      "integrity": "sha512-vugEeXjyYFBCUOpX+ZuaunbK3QXMKaQ3zUnRfIpRBlGkY7QizCnzyyn2ASfcxsvyU3ef+CJppVywnl3Kgf13Gg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "mime": "^2.0.3",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz",
+          "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "url-parse": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.3.tgz",
diff --git a/package.json b/package.json
index e9caaac..6d04532 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "devDependencies": {
     "autoprefixer": "^9.1.5",
     "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.1",
@@ -22,6 +23,7 @@
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
     "style-loader": "^0.22.1",
+    "url-loader": "^1.1.1",
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5",
diff --git a/src/logo.png b/src/logo.png
new file mode 100644
index 0000000..ec698b3
--- /dev/null
+++ b/src/logo.png
diff --git a/src/main.css b/src/main.css
index 737c60a..b8318ae 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,5 +1,9 @@
 body {
   background: cornsilk;
+
+  background-image: url("./logo.png");
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .pure-button {
diff --git a/webpack.config.js b/webpack.config.js
index 189a3b1..9fdd79a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,6 +24,12 @@ const productionConfig = merge([
   parts.purifyCSS({
     paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
   }),
+  parts.loadImages({
+    options: {
+      limit: 15000,
+      name: "[name].[ext]",
+    },
+  }),
 ]);
 const developmentConfig = merge([
   parts.devServer({
@@ -31,6 +37,7 @@ const developmentConfig = merge([
     port: process.env.PORT,
   }),
   parts.loadCSS(),
+  parts.loadImages(),
 ]);
 
 module.exports = mode => {
diff --git a/webpack.parts.js b/webpack.parts.js
index 8d6ac68..f4cc8bc 100644
--- a/webpack.parts.js
+++ b/webpack.parts.js
@@ -58,3 +58,19 @@ exports.autoprefix = () => ({
     plugins: () => [require("autoprefixer")()],
   }
 });
+
+exports.loadImages = ({ include, exclude, options } = {}) => ({
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg)$/,
+        include,
+        exclude,
+        use: {
+          loader: "url-loader",
+          options,
+        },
+      }
+    ]
+  },
+});