1

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
                        }
                    }
                })
            ],
        }
    }];
};```
3
  • What symptom are you seeing that leads you to believe that the sourcemaps were generated incorrectly? Commented Jul 26, 2021 at 15:11
  • @Monkpit When I open one of my source files in DevTools Sources section, I see the compiled code, not the original. And the filename is not whatever.component.ts but whatever.component.js. And if I check the source map file itself I see the same. Commented Jul 26, 2021 at 15:18
  • webpack.js.org/guides/typescript Does this shed any light? I'm sorry I am not a webpack guru by any means. Commented Jul 26, 2021 at 15:52

1 Answer 1

1

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

resolve: {
    extensions: ['.ts', '.js'],
},
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.