在WebStorm中調試WebPack 11

Question

我試圖在WebStorm中使用源映射調試與WebPack捆綁在一起的JavaScript應用程序。我現在webpack.config.js看起來是這樣的：

var path = require('path'); 

module.exports = { 
    debug: true, 
    devtool: 'source-map', 

    context: path.join(__dirname, 'js'), 
    entry: './main.js', 
    output: { 
     path: path.join(__dirname, 'Built'), 
     filename: '[name].bundle.js' 
    } 
} 

生成源地圖，看起來像這樣：

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\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// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function() {\r\n \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n var a = 10;\r\n var b = 12;\r\n var c = a + b;\r\n document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} 

現在，我已經發現提到WebStorm 11將全力支持的WebPack和它的源映射[例如。 here]，但它提供的信息非常少。我提供的配置調試不起作用，斷點被忽略。經過多次嘗試後，我發現唯一一個讓我進行調試的配置（正確地說，其他嘗試有時會破壞代碼，但行和代碼執行不匹配），設置爲devtool: 'eval'。但是，這與我嘗試使用的源映射無關。

生成的源地圖適用於所有流行的瀏覽器，讓我們調試它們的原始源代碼，那麼爲什麼WebStorm不起作用？在使用源映射之前，我需要在WebStorm中執行一些配置嗎？

我使用的當前WS版本是142.4148，調試是通過chrome擴展完成的。我很感激任何有關如何在這裏設置調試的想法或教程，即使對於較舊的WS 10版本（我使用WS 11也僅僅是因爲它應該與WebPack很好地配合）。

Answer 1

Webpack源代碼映像主要支持WebStorm 11，但您需要在您的Javascript Debug運行配置中相應地設置遠程URL映射，以使WebStorm知道包含Webpack輸出文件（包括源映射）的目錄以及源映射中指定的源文件的路徑映射到其位置的方式該項目。因此，您需要指定已編譯的腳本Web服務器URL到本地路徑的映射，並將源URL（在源映射中列出）映射到項目中的本地路徑。 聽起來很奇怪，但並不那麼複雜。對於類似於您的配置文件，您可能必須爲您的'Built'目錄（其中包文件和源地圖位於其中）指定遠程URL http://localhost:63342/webpack/Built，並且webpack:///. - 對於'js'目錄。這對我來說工作正常... 我們計劃很快發佈關於webpack調試的博客文章...現在，我可以建議看看

Answer 2

我在這上面花了好幾個小時，並且我希望它能幫助別人。本博客文章中的說明實際上是有效的：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

所以，請按照說明配置webstorm實例，但不要使用webpack-dev-server運行它，請使用不同的Web服務器，如WEBrick ::在Ruby mine/rails或內置調試服務器中使用HTTPServer。出於某種原因，webpack-dev-server不會將源映射正確地與行號相關聯。

Answer 3

我想補充一點，你可以把聲明

調試;

甚至在angular或vue2的框架文件中你的javascript/typescript。

所以即使你的路徑映射到URL不起作用，它仍然會步。