我正在尝试使用源映射在 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 不起作用？在使用源 map 之前，我需要在 WebStorm 中执行一些配置吗？

我当前使用的 WS 版本是 142.4148，调试是通过 chrome 扩展完成的。我将不胜感激关于如何在此处设置调试的任何想法或教程，即使对于旧的 WS 10 版本(我使用 WS 11 只是因为它应该与 WebPack 很好地配合使用)

最佳答案

WebStorm 11 主要支持 Webpack sourcemaps，但您需要在 Javascript Debug Run configuration 中相应地设置远程 URL 映射，让 WebStorm 知道 Webpack 输出文件(包括源文件)所在的目录maps) 以及 sourcemap 中指定的源文件路径如何映射到它们在项目中的位置。因此，您需要指定编译后的脚本 Web 服务器 URL 到其本地路径的映射，并将源 URL(在源映射中列出)映射到项目中的本地路径。 听起来很奇怪，但并没有那么复杂。对于像您这样的配置文件，您可能必须为您的 'Built' 目录指定远程 URL http://localhost:63342/webpack/Built 包文件和 sourcemaps 位于 webpack:///. - 用于 'js' 目录。这对我来说很好...... 我们计划很快发布一篇关于 webpack 调试的博文...目前，我建议您查看 https://github.com/prigara/debugging-webpack举个简单的例子

关于javascript - 在 WebStorm 11 中调试 WebPack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32445932/