[Task] #58, webpack and react setup

Type-Style · Apr 5, 2024 · fbb9315 · fbb9315
1 parent 9e56351
commit fbb9315
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 97 deletions.
diff --git a/httpdocs/index.html b/httpdocs/index.html
@@ -1,57 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome Page</title>
-    <style>
-        @keyframes slideInFromLeft {
-          0% {
-            transform: translateX(-10%);
-          }
-          100% {
-            transform: translateX(10%);
-          }
-        }
-        @keyframes textShadow {         
-          50% {
-            text-shadow: 0 0 20px #000;
-          }
-        }
-				@keyframes move-it {				
-					to {
-						background-position: 100px 0px;
-					}
-				}
-				html, body {
-					height: 100%; overflow: hidden;
-				}
-        body {
-						background: repeating-linear-gradient(
-							45deg,
-							#014126,
-							#014126 5%,
-							#025c37 5%,
-							#025c37 10%
-						);
-						background-size: 100px 100px;
-						animation: move-it 2s linear infinite;
-            font-family: Arial, sans-serif;						
-						display: flex;
-						justify-content: center;
-						align-items: center;
-        }
-        h1 {
-            color: rgb(255, 255, 255);
-            text-align: center;
-            animation: 2s ease-in-out 0s infinite slideInFromLeft alternate-reverse, 3s ease-in-out 0s infinite textShadow;
-						filter: drop-shadow(0 0 10px rgb(0, 255, 128));
-						font-size: 40px;
-						font-size: 5dvmax;
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Welcome Page</title>
+  <style>
+    @keyframes slideInFromLeft {
+      0% {
+        transform: translateX(-10%);
+      }
+
+      100% {
+        transform: translateX(10%);
+      }
+    }
+
+    @keyframes textShadow {
+      50% {
+        text-shadow: 0 0 20px #000;
+      }
+    }
+
+    @keyframes move-it {
+      to {
+        background-position: 100px 0px;
+      }
+    }
+
+    html,
+    body {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    body {
+      background: repeating-linear-gradient(45deg,
+          #014126,
+          #014126 5%,
+          #025c37 5%,
+          #025c37 10%);
+      background-size: 100px 100px;
+      animation: move-it 2s linear infinite;
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    h1 {
+      color: rgb(255, 255, 255);
+      text-align: center;
+      animation: 2s ease-in-out 0s infinite slideInFromLeft alternate-reverse, 3s ease-in-out 0s infinite textShadow;
+      filter: drop-shadow(0 0 10px rgb(0, 255, 128));
+      font-size: 40px;
+      font-size: 5dvmax;
+    }
+  </style>
 </head>
+
 <body>
+  <div id="root">
     <h1>Welcome</h1>
+  </div>
+  <script src="/js/bundle.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/src/cache.ts b/src/cache.ts
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+const App = () => {
+  return (
+    <h1>Hello, React!</h1>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/error.ts b/src/error.ts
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/client/index.tsx',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: {
+					loader: 'ts-loader',
+					options: {
+						configFile: 'src/client/tsconfig.json'
+					}
+				},
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist/httpdocs/js'),
+  },
+};