如何在打字稿文件中调试Webpack项目而不是在VSCode中输出在webpack-dev-server上运行的捆绑文件

最后，您将能够实现这一目标。

webpack.config.ts

import Webpack from "webpack";
import Path from "path";

const factory: Webpack.ConfigurationFactory = (env, args): Webpack.Configuration => {
    const outputPath = Path.resolve(__dirname, "build");
    const config: Webpack.Configuration = {
        output: {
            path: outputPath
        },
        devtool: "source-map", // this is a key point, this option makes browser catch breakpoints faster than "inline-source-map"
        devServer: {
            // don't need writeToDisk="true"
            contentBase: outputPath,
            hot: true,
            liveReload: false,
        }
    };

    return config;
};

export default factory;

tsconfig.json ！超级重要

{
    "compilerOptions": {
        "sourceMap": true // if not set, breakpoints will point wrong lines
    }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome", // note this is not just "chrome" as the debugger is "JavaScript Debugger"
            "name": "Attach Chrome",
            "port": 9222,
            // depending on your preference, you may want to set the request option as 'launch'.
            // you may want to set the request option as 'launch'
            "request": "attach",
            // if the request option is 'launch' then this option should be changed to "url": "localhost:3000"
            // note that the port number should be the one you set on devServer.port in webpack.config
            "urlFilter": "localhost:3000",
            "webRoot": "${workspaceFolder}/frontend", // make the path match your project
        },
    ]
}

有关应如何设置launch.json的更多信息：Chrome调试器

尽管它不是JavaScript Debugger，但它们共享大多数配置，因为VSCode刚刚将javascript调试工具从Debugger for Chrome移至JavaScript Debugger，因此您只需参考链接上的描述即可。