Webpack generates JavaScript source maps instead of TypeScript

Question

I am working on a TypeScript app (Angular 11, for what it's worth), using Webpack to bundle the code. I have set up webpack to generate a source map, and it does, however the source map is generated for the JavaScript code, not for the original TypeScript, as if the order of execution were somehow messed up. The sourcemap tag is added correctly at the end of the JS file, and the map gets loaded correctly, so it seems it's a configuration error on my side rather than anything else.

I'm not too fluent in webpackish, the file below has been compiled from other configs I made earlier for other projects, and which have been working nicely there, so I suppose I did something wrong this time. Can anybody see anything? Thanks a lot.

Webpack 4.44.2
Typescript 4.0.5
Nodejs 12.20.1
Angular 11.0.6
Babel 7.12.10

const {AngularCompilerPlugin} = require('@ngtools/webpack');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default;
const TerserPlugin = require('terser-webpack-plugin');

const dev = !!process.argv.includes('--watch');

module.exports = function() {
    const srcDir = path.resolve(__dirname);
    const buildDir = path.resolve(__dirname, 'build');
    const outputDir = process.env.npm_config_out ? path.resolve(process.cwd(), outDirArg) : buildDir;

    const sassLoader = {
        loader: 'sass-loader',
        options: {sourceMap: dev}
    };

    return [{
        mode: 'production',
        devtool: dev ? 'source-map' : undefined,
        target: 'web',
        watch: dev,
        entry: {
            something: path.resolve(srcDir, 'something.module.ts'),
        },
        module: {
            rules: [{
                test: /\.ts$/,
                include: [srcDir],
                exclude: /\.spec\.ts$|\.test\.ts$/,
                use: ['@ngtools/webpack'],
                parser: {
                    amd: false,
                    commonjs: true,
                    system: false,
                    harmony: true,
                    requireInclude: false,
                    requireEnsure: false,
                    requireContext: false,
                    browserify: false,
                    requireJs: false,
                    node: false
                }
            }, {
                test: /\.js$/,
                include: [srcDir],
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', {
                                'targets': '> 0.25%, not dead, ie 11',
                                'useBuiltIns': 'entry',
                                'corejs': 3
                            }]],
                        }
                    }
                ]
            }, {
                test: /\.component\.scss$/,
                include: [srcDir],
                use: ['raw-loader', sassLoader]
            }, {
                test: /\.html$/,
                include: [srcDir],
                use: [{
                    loader: 'html-loader',
                    options: {
                        minimize: {
                            removeComments: true,
                            collapseWhitespace: true,
                            conservativeCollapse: true,
                            caseSensitive: true,
                            minifyJS: false,
                            minifyCSS: false,
                            removeAttributeQuotes: false,
                        },
                        attributes: false
                    }
                }]
            }, {
                test: /\.bdf$/,
                include: [srcDir],
                use: ['raw-loader']
            }]
        },
        output: {
            path: outputDir,
            filename: '[name].js',
            sourceMapFilename: '[file].map'
        },
        plugins: [
            new AngularCompilerPlugin({
                skipCodeGeneration: false,
                typeChecking: true,
                tsConfigPath: path.resolve(srcDir, 'tsconfig.json'),
                compilerOptions: {
                    entryModule: 'something.module#SomethingModule',
                }
            }),
            new HashedModuleIdsPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].[hash].css',
                chunkFilename: '[name].[hash].css',
            }),
            new SuppressChunksPlugin(['css']),
        ],
        optimization: {
            minimize: true,
            minimizer: [
                new OptimizeCSSAssetsPlugin({}),
                new TerserPlugin({
                    sourceMap: true,
                    parallel: true,
                    terserOptions: {
                        mangle: {
                            toplevel: true
                        },
                        module: true,
                        compress: {
                            booleans_as_integers: false,
                            toplevel: true,
                            keep_fargs: false,
                            drop_debugger: false,
                        },
                        parse: {},
                        output: {
                            comments: false
                        }
                    }
                })
            ],
        }
    }];
};```

Answer 1

My problem was solved my just adding this to the configuration.

resolve: {
    extensions: ['.ts', '.js'],
},