webpack vs无源代码中的代码源地图

我开始在无服务器中创建项目，此项目使用无服务器webpack插件。现在我们通过webpack吸引了babel，现在我们希望用代码来调试它。webpack vs无源代码中的代码源地图

我们的文件结构代表： DIST：

|- babelExample.js 
    |- babelExample.js.map 
    |- converse.js 
    |- converse.js.map

我们设置webpack.config.js

var path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    devtool: "source-map", 
    debug: true, 
    entry: { 
    babelExample: 'example/babelExample.js', 
    converse: 'converse/converse.js' 
    }, 
    target: 'node', 
    plugin: [ 
    new webpack.DefinePlugin({ 
     '__DEV__': true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: __dirname, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     } 
    ] 
    }, 
    output: { 
    devtoolModuleFilenameTemplate: info => { 
     return `${info.resourcePath}?${info.loaders}` 
    }, 
    libraryTarget: 'commonjs', 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js' 
    }, 
    resolve: { 
    root: [ 
     path.resolve(__dirname), 
     path.resolve(__dirname, 'server'), 
    ], 
    extensions: ['', '.js', '.jsx'] 
    } 
};

我们launch.json

{ 
    "type": "node", 
    "request": "launch", 
    "name": "Serve webcast", 
    "program": "/Users/edevh46/.nvm/versions/node/v4.3.2/lib/node_modules/serverless/bin/serverless", 
    "cwd": "${workspaceRoot}", 
    "args": [ 
     "webpack", 
     "serve" 
    ], 
    "preLaunchTask": "build", 
    "runtimeArgs": [ 
     "--nolazy" 
    ], 
    "outFiles": [ 
     "${cwd}/dist/**/*.js" 
    ], 
    "sourceMaps": true, 
    "smartStep": true 
},

当我们开始无服务器的WebPack ，它看起来是正确的，所以在dist文件夹js生成的文件，但是断点工作w必须断开生成的文件，然后才能显示正确的源文件。

在我看来，对于特定的文件，路径在vs代码中没有被正确地满足。

看地图的文件：

{ “版本”：3 “源”： “的WebPack /自举 cfe5ab77d9ed3f728d29未定义”[，“./服务器/示例/ babelExample.js未定义？ “ ”./〜/通天塔运行时/核心JS/promise.js？未定义“， ”./〜/核心JS /库/ FN/promise.js？未定义“，” ./〜/核心-JS /library/modules/es6.string.iterator.js?undefined","./~/core-js/library/modules/_string-at.js?undefined","./~/core-js/library/modules /_to-integer.js?undefined","./~/core-js/library/modules/_defined.js?undefined","./~/core-js/library/modules/_iter-define.js?undefined “ ”./〜/芯-JS /库/模块/ _library.js？未定义“， ”./〜/芯-JS /库/模块/ _export.js？未定义“，” ./〜/芯-JS /library/modules/_global.js?und efined “ ”./〜/芯-JS /库/模块/ _core.js？未定义“， ”./〜/芯-JS /库/模块/ _ctx.js？未定义“，” ./〜/核壳JS /库/模块/ _a-function.js？未定义 “ ”./〜/芯-JS /库/模块/ _hide.js？未定义“，” ./〜/芯-JS /库/模块/ _object- dp.js？未定义 “ ”./〜/芯-JS /库/模块/ _an-object.js？未定义“，” ./〜/芯-JS /库/模块/ _is-object.js？

和进一步向下：

“文件”： “babelExample.js”， “sourcesContent”：[” \吨//模块高速缓冲存储器\ n \ TVAR installedModules = {}; \ n \ n // t //需要函数\ n \ tfunction webpack_require（moduleId）{\ n \ n \ t \ t //检查模块是否在缓存中\ n \ t \ tif（installedModules [moduleId] ）\ n \ t \ t \ treturn installedModules [moduleId] .exports; \ n \ n \ t \ t //创建一个新模块（并将其放入缓存）\ n \ t \ tvar module = installedModules [moduleId] = {\ n \ t \ t \ texports：{}，\ n \ t \ t \ tid： moduleId，\ n \ t \ t \ tloaded：false \ n \ t \ t; n \ n \ t \ t //执行模块 function \ n \ t \ tmodules [moduleId] .call（module.exports，module， module.exports，webpack_require）; \ n \ n \ t \ t //将模块标记为已加载\ n \ t \ tmodule.loaded = true; \ n \ n \ t \ t //返回模块出口 \ n \ t \ treturn module.exports; \ n \ t } \ n \ n \ n \ t //暴露模块对象（webpack_modules）\ n \ t__webpack_require __。m = 模块; \ n \ n \ t //暴露模块缓存\ n \ t__webpack_require__。C = installedModules; \ n \ n \吨// webpack_public_path \ n \ t__webpack_require __ P = \ “\”。\ n \ n \吨//加载条目模块并返回出口的\ n \ treturn webpack_require（0）; \ n \ n \ n \ n // WEBPACK FOOTER // \ n // webpack/bootstrap cfe5ab77d9ed3f728d29“，”'use strict'; \ nconst createResponse = require（'../ lib/createResponse '）; \ n \ n \ nexport const hello =（event，context，cb）=> {\ n console.log（'SERVER this'）; \ n const p = new Promise（（resolve，reject）= > {\ n
resolve（'success'）; \ n}）; \ np \ n。然后（r => cb（null，{\ n
message：'Go Serverless Webpack（Babel ）v1.0！您的功能已成功执行！'，\ n event，\ n}））\ n .catch（e => cb（e））; \ n}; \ n \ n \ n // WEBPACK FOOTER // \ n // ./server/example/babelExample.js","module.exports

我只有在匹配sourcemaps新的，但我会很感激，如果有人可以帮助理解为什么我要断点生成的文件和不是原来的。

我已经尝试过node2 --inspect，但在那里breakpointing被彻底打破，这导致我相信有一些东西缺少帮助解决路径，回到原始文件。

任何帮助，将不胜感激。

来源

2017-02-09 RicardoDuarte

再次尝试node2 - 这可能不会与'node'一起工作，因为webpack确实很奇怪。检查node2自述文件中的提示 - https://github.com/Microsoft/vscode-node-debug2#the-scripts-command - 并使用'.scripts'命令找出问题所在，并添加一个'sourceMapPathOverrides '如果需要的话。 –

明天我只需要一个简单的问题来使用node2，我必须使用节点v7.x（我是在v7.5.0上），但lambda使用v4.3.2，完全信任babel为v4生成稳定的代码是合理的。 3.2？另外，我还有另外一篇关于vs代码的源代码，我将路径替换为绝对路径，这次在源代码中我有一个完整的有效路径，但结果是一样的：（......这个东西是我见过的很多例子的webpack源码地图工作vscode，这导致我相信也许我失去了一些东西 – RicardoDuarte

@RobLourens是改回到node2和使用absolutePaths似乎允许我在vs代码设置断点，虽然这个功能似乎有点flacky 。你知道node -inspect期望的源代码和在vs代码调试器中有什么不同吗？我有点担心在amazon lambda中使用不同的运行时会导致未来的问题。 – RicardoDuarte

打了一下，再与输出部分后，我发现，如果我添加：

devtoolModuleFilenameTemplate: '[absolute-resource-path]', 
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',

到输出部分VS代码现在可以使用节点工艺不当找到断点。

来源

2017-02-15 09:29:24 RicardoDuarte

webpack vs无源代码中的代码源地图

回答

相关问题