🔧 webpack + typescript 설정

tsconfig.json

@@ -1,24 +1,30 @@
 {
-  "include": ["src"],
+  "include": ["src", "index.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["DOM"],
-    "module": "ES6" /* Specify what module code is generated. */,
-    "outDir": "build" /* Specify an output folder for all emitted files. */,
+    "target": "ES2016",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext" /* Specify what module code is generated. */,
+    // "outDir": "build" /* Specify an output folder for all emitted files. */,
     "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
     "strict": true /* Enable all strict type-checking options. */,
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
-    "baseUrl": ".",
+    "moduleResolution": "Node",
+    "baseUrl": "./src",
     "paths": {
-      "@type/*": ["./src/types/*"],
-      "@components/*": ["./src/components/*"],
-      "@api/*": ["./src/api/*"],
-      "@util/*": ["./src/util/*"]
+      "@type/*": ["types/*"],
+      "@components/*": ["components/*"],
+      "@api/*": ["api/*"],
+      "@util/*": ["util/*"]
     }
   },
   "ts-node": {
-    "esm": true
+    "compilerOptions": {
+      "module": "CommonJS",
+      "moduleResolution": "Node",
+      "target": "ES5",
+      "esModuleInterop": true
+    }
   }
 }

webpack.config.js

@@ -1,33 +1,61 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+require('webpack-dev-server');
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
 module.exports = {
-  entry: './build/index.js',
+  name: 'Coffee Shop',
+  mode: isDevelopment ? 'development' : 'production',
+  devtool: isDevelopment ? 'hidden-source-map' : 'eval',
+  entry: './index',
   output: {
-    filename: 'bundle.js',
+    filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
+    publicPath: '/dist/',
   },
   plugins: [
     new HtmlWebpackPlugin({ template: './index.html' }),
-    new MiniCssExtractPlugin({ linkType: false, filename: '[name].css', chunkFilename: '[id].css' }),
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+    }),
   ],
   resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
     alias: {
-      '@type': path.resolve(__dirname, 'build/types'),
-      '@components': path.resolve(__dirname, 'build/components'),
-      '@api': path.resolve(__dirname, 'build/api'),
-      '@util': path.resolve(__dirname, 'build/util'),
+      '@type': path.resolve(__dirname, 'src', 'types'),
+      '@components': path.resolve(__dirname, 'src', 'components'),
+      '@api': path.resolve(__dirname, 'src', 'api'),
+      '@util': path.resolve(__dirname, 'src', 'util'),
     },
   },
   module: {
     rules: [
+      {
+        test: /\.ts?$/,
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            ['@babel/preset-env', { targets: { browsers: ['last 2 chrome versions', 'IE 10'] }, debug: isDevelopment }],
+            '@babel/preset-typescript',
+          ],
+        },
+      },
       {
         test: /\.(sa|sc|c)ss$/i,
         exclude: /node_modules/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },
+  devServer: {
+    historyApiFallback: true,
+    port: 5000,
+    devMiddleware: {
+      publicPath: '/dist/',
+    },
+    static: { directory: path.resolve(__dirname) },
+  },
 };