add css, image loader

@@ -9,14 +9,10 @@ npx gts init
 
 # 개발
 
-### 프로젝트 dev 모드
+### 프론트 서버 띄우기
 ```shell
-tsc -w
+npm run build
+npm run start
 ```
 
-### 프론트 서버 띄우기
-```shell
-npm install -g http-server
-cd ./app
-http-server ./
-```
\ No newline at end of file
+`npm run start`만 진행할 시 수정사항이 적용되지 않음
\ No newline at end of file

@@ -24,7 +24,9 @@
   "devDependencies": {
     "@types/node": "^14.11.2",
     "css-loader": "^5.1.1",
+    "file-loader": "^6.2.0",
     "gts": "^3.1.0",
+    "style-loader": "^2.0.0",
     "ts-loader": "^8.0.17",
     "typescript": "^4.0.3",
     "webpack": "^5.24.3",

+declare module '*.png';

 import {Bye} from './Bye';
 import './assets/style/App.css';
+import v4 from './assets/image/v4Logo.png';
 
 const hi = 'hchoi won';
 
 const hi1 = () => {
   console.log(hi);
   Bye();
+
+  const tag = window.document.querySelector('#App');
+
+  if(tag) {
+    tag.innerHTML = `<img src=${v4} alt="image" />`;
+  }
 };
 
 hi1();
\ No newline at end of file

 {
   "extends": "./node_modules/gts/tsconfig-google.json",
   "compilerOptions": {
+    "lib": ["es5", "es6", "dom"],
     "rootDir": ".",
     "outDir": "build",
     "target": "es6",
@@ -11,5 +12,5 @@
   },
   "include": [
     "src/**/*.ts"
-  ]
+  ],
 }

@@ -15,7 +15,14 @@ module.exports = {
             },
             {
                 test : /\.css$/,
-                use: ['css-loader']
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(png|jpe?g|gif|jp2|webp)$/,
+                loader: 'file-loader',
+                options: {
+                    name: 'images/[name].[ext]'
+                },
             }
         ]
     },