diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..fbd6da0e13a3e6cf5c7346d9502b04cc6bd4a4bf
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000000000000000000000000000000000000..f088ade9c251c56972872a0fa8c38d9d6bf7f27e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/dist/index.html b/dist/index.html
deleted file mode 100644
index 7fbf57365d4345e919777cc372b298c0fb6ef35d..0000000000000000000000000000000000000000
--- a/dist/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!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>
diff --git a/package.json b/package.json
index 7063b60cab03b80ba23b5d0bf5e9d31fc9fc93ab..721d32000468f819a2a80c4a497c6891b68b254a 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.73.0",
- "webpack-cli": "^4.10.0"
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.13.2"
},
"scripts": {
+ "start": "webpack-dev-server --open --mode development --port 3000",
"build": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..479621014dad5b3b6cf9250e8ed3ed4f3a92aae9
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+ <head>
+ <title> muiBasic </title>
+ <meta charset="UTF-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+ </head>
+ <body>
+ <div id="app"></div>
+ <script src="./app.bundle.js" type="text/javascript"></script>
+ </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
index 794cb598ae04c81a5dec0774c581030763da3b23..da15307110cfaa9a89748fc499c99305516746d3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,33 +1,28 @@
const path = require('path');
+const webpack = require('webpack');
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']
- }
- }
- }
+ entry: {
+ app: './src/index.js'
+ },
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'public')
+ },
+ module: {
+ rules: [{
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader'
+ }
+ }]
+ },
+ devServer: {
+ hot: true,
+ allowedHosts: 'all',
+ },
+ plugins: [
+ new webpack.HotModuleReplacementPlugin()
]
- },
- devtool: 'source-map',
- // https://webpack.js.org/concepts/mode/#mode-development
- mode: 'development'
-};
-
+};
\ No newline at end of file