使用 webpack 正确使用 source-map 进行可视化代码

Question

您好，我正在尝试使用可视代码调试 js 代码。视觉代码没有在断点处停止，抱怨找不到合适的 .

我的 webpack 配置如下所示

{
        'mode': mode,
        entry: {
            lapp: './src/app.js',
        },  
        devtool: 'source-map',
        output: {
            path: path.join(__dirname, 'build'),
            filename: '[name].js',
            publicPath: "/build/",
            libraryTarget: 'umd',
            library: 'LAPP'
        }

    },

可视代码调试配置看起来像

 "version": "0.2.0",
    "configurations": [

        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:8000/examples/livebuild/lapps.html",
            "webRoot": "/Users/name/Sites/LappsInternal/
        },
    ]

关于从可视代码执行 .scripts 说

-webpack://LAPPS/./src/app.js (/Users/name/Sites/LappsInternal/build/webpack:/LAPPS/src/app.js)

有什么建议吗？ github 中针对视觉代码报告了类似的问题，但解决方案没有帮助

Answer 1

更新 devtool 配置为 devtool: 'cheap-module-eval-source-map'。

{
    'mode': mode,
    entry: {
        lapp: './src/app.js',
    },  
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        publicPath: "/build/",
        libraryTarget: 'umd',
        library: 'LAPP'
    }
},

使用 webpack 正确使用 source-map 进行可视化代码

Correctly using source-map for visual code using webpack

javascript

visual-studio

source-maps

webpack