First Commit

b8c29f35 · JYCHOI · b8c29f35 · b8c29f35 · b8c29f35 · b8c29f35
Commit b8c29f35 authored 2 years ago by JYCHOI
--- a/dist/index.html
+++ b/dist/index.html
+<!doctype html>
+<html>
+	<head>
+		<title> muiBasic </title>
+		<meta charset="UTF-8"/>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script src="./bundle.js" type="text/javascript"></script>
+	</body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "muibasic_starterkit",
+  "version": "1.0.0",
+  "description": "Boiler plate for MaterialUI Development",
+  "main": "webpack.config.js",
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.8.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^8.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "scripts": {
+    "build": "webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "Material",
+    "UI",
+    "ReactJS"
+  ],
+  "author": "Jae Young Choi",
+  "license": "MIT"
+}
--- a/src/App.js
+++ b/src/App.js
+import React from 'react';
+import Typography from '@mui/material/Typography';
+export default function App () {
+    return <Typography variant="h1">Hello World</Typography>
+}
--- a/src/index.js
+++ b/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+ReactDOM.render(<App/>, document.getElementById('app'));
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+module.exports = {
+  // enntry file
+  entry: './src/index.js',
+  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: [
+          path.resolve(__dirname, 'src')
+        ],
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['@babel/plugin-proposal-class-properties']
+          }
+        }
+      }
+    ]
+  },
+  devtool: 'source-map',
+  // https://webpack.js.org/concepts/mode/#mode-development
+  mode: 'development'
+};