Seperate webpack tsconfig from node tsconfig

Author: kyle-lamse

config/paths.ts

@@ -5,9 +5,10 @@ const projectRoot = path.join(__dirname, '..');
 const paths = {
     dist: path.join(projectRoot, 'dist'),
     app: path.join(projectRoot, 'src'),
-    config: path.join(projectRoot, __dirname),
+    config: __dirname,
     template: path.join(projectRoot, 'template'),
     public: path.join(projectRoot, 'public'),
+    webpackTSConfig: path.join(__dirname, 'tsconfig.webpack.json'),
     staticPath: '/static'
 };
 

config/tsconfig.webpack.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../tsconfig.json",
+    "module": "esnext",
+    "moduleResolution": "node"
+}

config/webpack.dev.config.ts

@@ -33,7 +33,10 @@ const config: Configuration = {
             // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
             {
                 test: /\.tsx?$/,
-                loader: 'awesome-typescript-loader'
+                loader: 'awesome-typescript-loader',
+                query: {
+                    configFileName: paths.webpackTSConfig
+                }
             },
 
             // Extract css files into one giant file

src/index.tsx

@@ -3,15 +3,7 @@ import * as ReactDOM from 'react-dom';
 
 import { Hello } from './components/Hello';
 
-if (true) {
-    console.log('hello');
-}
-
 ReactDOM.render(
     <Hello compiler="TypeScript" framework="React" />,
     document.getElementById('root')
 );
-
-for (let i = 0; i < 5; i++) {
-    console.log(i);
-}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "./src/**/*"
   ],
   "compilerOptions": {
     "outDir": "./dist/",
@@ -15,6 +16,6 @@
     ]
   },
   "include": [
-    "./src/**/*"
+    "./**/*"
   ]
 }