在WebStorm 11中调试WebPack

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

WebStorm 11大多支持Webpack源映射，但您需要在Javascript Debug运行配置中设置相应的远程URL映射，以便让WebStorm知道包含Webpack输出文件(包括源映射)的目录，以及源映射中指定的源文件的路径如何映射到它们在项目中的位置。因此，您需要指定编译后的脚本web服务器URL到其本地路径的映射，并将源URL (在源映射中列出)映射到项目中的本地路径。听起来很奇怪，但并不是那么复杂。对于像您这样的配置文件，您可能必须为包文件和源地图所在的'Built'目录指定远程URL，并为'js'目录指定webpack:///. -。这对我来说很好。我们计划很快发表一篇关于webpack调试的博客文章……现在，我建议您查看https://github.com/prigara/debugging-webpack中的简单示例

Answer 2

我在这个问题上绞尽脑汁了好几个小时，我希望它能帮助其他人。这篇博文中的指令确实有效：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

所以，按照说明来配置你的webstorm实例，但是不要在运行时使用webpack-dev- server，要使用不同的web服务器，比如Ruby mine / rails中使用的WEBrick::HTTPServer或者内置的调试服务器。由于某些原因，webpack-dev-server不能正确地将源映射与行号相关联。

Answer 3

我要补充的是，您可以将语句

调试器；

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

因此，即使您的路径映射到URL不起作用，它仍然会逐步执行。