Question

您好我正在尝试使用Visual代码调试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/
        },
    ]

关于可视化代码中的例外文字

-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显示可视代码

1 个答案: