improve

Author: freewind

package.json

@@ -3,16 +3,20 @@
     "demo": "webpack-dev-server --open"
   },
   "dependencies": {
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "ts-node": "9.1.1"
   },
   "devDependencies": {
+    "@types/html-webpack-plugin": "3.2.4",
     "@types/node": "12.7.2",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
+    "@types/webpack": "4.41.25",
     "css-loader": "3.2.0",
     "html-webpack-plugin": "3.2.0",
     "source-map-loader": "0.2.4",
+    "strip-ansi": "6.0.0",
     "style-loader": "1.0.0",
     "ts-loader": "6.0.4",
     "typescript": "3.8.3",

src/entry.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import Hello from './hello'
+import { Hello } from './hello'
 
 ReactDOM.render(
   <Hello/>,

src/hello.tsx

@@ -1,8 +1,9 @@
-//import * as React from 'react'
-import React from 'react'
+import React, { FC } from 'react';
 
-export default function Hello() {
+type Props = {};
+
+export const Hello: FC<Props> = ({}) => {
   return <div>
     <h1>Hello React</h1>
-  </div>
-};
+  </div>;
+}

webpack.config.js renamed to webpack.config.ts

@@ -1,10 +1,11 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const path = require('path');
+import { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import path from 'path';
 
-module.exports = {
+const config: Configuration = {
   mode: 'development',
   entry: './src/entry.tsx',
-  devtool: "inline-source-map",
+  devtool: 'inline-source-map',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
@@ -23,3 +24,5 @@ module.exports = {
     new HtmlWebpackPlugin()
   ]
 }
+
+export default config;