TypeScript with Webpack - Shows JavaScript but not TypeScript source maps

Question

I have taken it upon myself to move our products angularjs codebase into the current day with the eventual goal to move to Angular 2. The first step for me is to get webpack and typescript working with the codebase.

The JavaScript bundling works and the application can run, but if I change one of the files into a TypeScript file and webpack again the application it can no longer find the file. I cannot see its source maps when I have sourceMap: true and devtool: 'inline-source-map' . If I look in the bundle.js output I do see my TypeScript classes there. If I manually compile to JavaScript with tsc and use the javascript file everything works so no problem with any possible generated code.

I feel like I am missing something.

webpack.config.js:

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: './wwwroot/index.js',
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, 'wwwroot'),
  filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [
          'awesome-typescript-loader'
        ],
        exclude: [/node_modules/, /lib/]
      }
    ]
  },
  resolve: {
    extensions: [
      '.ts',
      '.js'
    ]
  },
  plugins: [
    new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/
      })
  ],
  externals: []
};

module.exports = config;

index.js - since this a really old angularjs app it does not have one entry point. The index.js list individual imports for modules and components. It also includes the import for typescript files

require.context('./app', true,  /^\.\/.*\.ts$/); 

// and a list of modules
import './app/modules/module_a.js';
import './app/modules/module_b.js';
//etc 

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "wwwroot",
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "lib": [ "dom", "es7" ]
  },
  "include": [
    "wwwroot/app/*"
    ],
  "exclude": ["**/lib"]
}

Answer 1

So it turns out my issue appears to be the way the webpack works. If I do not attempt to import something from a TypeScript file it would not load it and display the source maps. It worked after I did an import of the new TypeScript component from my angularjs app module.