Webpack 生成 JavaScript 个源映射而不是 TypeScript

Question

我正在开发一个 TypeScript 应用程序（Angular 11，不管它值多少钱），使用 Webpack 来捆绑代码。我已经设置了 webpack 来生成源映射，它确实如此，但是源映射是为 JavaScript 代码生成的，而不是为原始 TypeScript 生成的，就好像执行顺序不知何故被搞乱了一样。在 JS 文件末尾正确添加了 sourcemap 标签，并且正确加载了地图，因此看来这是我这边的配置错误，而不是其他任何问题。

我的 webpackish 不太流利，下面的文件是从我之前为其他项目所做的其他配置编译而来的，并且在那里工作得很好，所以我想我这次做错了什么。任何人都可以看到任何东西吗？非常感谢。

Webpack 4.44.2
打字稿 4.0.5
节点 12.20.1
Angular11.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

我的问题已经解决，我只是将其添加到配置中。

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

Webpack 生成 JavaScript 个源映射而不是 TypeScript

Webpack generates JavaScript source maps instead of TypeScript

source-maps

typescript

webpack