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無源代碼中的代碼源地圖

回答

相關問題