최원석3 [goesnow]

webpack with typescript

...@@ -9,6 +9,7 @@ package-lock.json ...@@ -9,6 +9,7 @@ package-lock.json
9 app/build/*.map 9 app/build/*.map
10 app/build/*.js 10 app/build/*.js
11 build 11 build
12 +public
12 13
13 key.py 14 key.py
14 admin.py 15 admin.py
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>Title</title> 5 + <title>home</title>
6 </head> 6 </head>
7 <body> 7 <body>
8 <div id="App"></div> 8 <div id="App"></div>
9 - <script type="module" src="build/dist/main.js" ></script> 9 + <script type="module" src="public/main.js" ></script>
10 </body> 10 </body>
11 </html> 11 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -13,19 +13,19 @@ ...@@ -13,19 +13,19 @@
13 "test": "echo \"Error: no test specified\" && exit 1", 13 "test": "echo \"Error: no test specified\" && exit 1",
14 "lint": "gts lint", 14 "lint": "gts lint",
15 "clean": "gts clean", 15 "clean": "gts clean",
16 - "compile": "tsc",
17 "fix": "gts fix", 16 "fix": "gts fix",
18 "prepare": "npm.cmd run compile", 17 "prepare": "npm.cmd run compile",
19 "pretest": "npm.cmd run compile", 18 "pretest": "npm.cmd run compile",
20 "posttest": "npm.cmd run lint", 19 "posttest": "npm.cmd run lint",
20 + "compile": "tsc -w",
21 "build": "webpack --watch", 21 "build": "webpack --watch",
22 - "dev": "tsc -w", 22 + "start": "webpack serve --open"
23 - "start": "http-server ./",
24 - "hot": "webpack serve --open"
25 }, 23 },
26 "devDependencies": { 24 "devDependencies": {
27 "@types/node": "^14.11.2", 25 "@types/node": "^14.11.2",
26 + "css-loader": "^5.1.1",
28 "gts": "^3.1.0", 27 "gts": "^3.1.0",
28 + "ts-loader": "^8.0.17",
29 "typescript": "^4.0.3", 29 "typescript": "^4.0.3",
30 "webpack": "^5.24.3", 30 "webpack": "^5.24.3",
31 "webpack-cli": "^4.5.0", 31 "webpack-cli": "^4.5.0",
......
1 +body{
2 + background-color: beige;
3 +}
...\ No newline at end of file ...\ No newline at end of file
1 import {Bye} from './Bye'; 1 import {Bye} from './Bye';
2 +import './assets/style/App.css';
2 3
3 -const hi = 'hello?'; 4 +const hi = 'hchoi won';
4 5
5 const hi1 = () => { 6 const hi1 = () => {
6 console.log(hi); 7 console.log(hi);
......
...@@ -3,17 +3,34 @@ const path = require('path') ...@@ -3,17 +3,34 @@ const path = require('path')
3 module.exports = { 3 module.exports = {
4 mode : 'development', 4 mode : 'development',
5 entry : { 5 entry : {
6 - main : './build/src/index.js' 6 + // main : './build/src/index.js'
7 + main : './src/index.ts'
8 + },
9 + module : {
10 + rules : [
11 + {
12 + test: /\.tsx?$/,
13 + use: "ts-loader",
14 + exclude: /node_modules/,
15 + },
16 + {
17 + test : /\.css$/,
18 + use: ['css-loader']
19 + }
20 + ]
21 + },
22 + resolve : {
23 + extensions: [".tsx", ".ts", ".js"],
7 }, 24 },
8 output : { 25 output : {
9 - publicPath: '/app/build/dist', 26 + publicPath: '/app',
10 - path: path.resolve('./build/dist'), 27 + path: path.resolve('./public'),
11 filename: '[name].js', 28 filename: '[name].js',
12 }, 29 },
13 devServer : { 30 devServer : {
14 port : 3000, 31 port : 3000,
15 hot: true, 32 hot: true,
16 - contentBase: ['./build','./src'], 33 + contentBase: __dirname,
17 inline: true, 34 inline: true,
18 watchOptions: { 35 watchOptions: {
19 poll: true 36 poll: true
......