在WebStorm中调试WebPack 11 [英] Debugging WebPack in WebStorm 11

问题描述

我正在使用源映射来调试WebStack中的WebPack捆绑的JavaScript应用程序。我当前的webpack.config.js如下所示：

I'm trying to debug javascript application bundled with WebPack in WebStorm using source mapping. My current webpack.config.js looks like this:

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'
    }
}

源地图是生成并看起来像这样：

The source map is generated and looks like this:

{"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 w不完全支持WebPack，它的源映射[例如 here ]，但它提供的信息很少。我提供的配置调试不起作用，断点被忽略。经过许多尝试，我发现了唯一的配置，让我做调试（正确地说，其他尝试有时可能会破坏代码，但行和代码执行不匹配），通过设置 devtool：'eval' / code>。但是，这与我试图使用的源映射无关。

Now, I have found mentions that WebStorm 11 will fully support WebPack and it's source mapping [eg. here] but it provides very little info. The debugging with config I provided doesn't work, the breakpoint is ignored. After many tries I have found out the only config that let's me do the debugging (correctly, other tries could sometimes break the code but the lines and code execution were mismatched), by setting devtool: 'eval'. However, this has nothing to do with source mapping I'm trying to use.

生成的源代码图适用于所有流行的浏览器，让我调试其中的原始源为什么WebStorm不工作？在使用源地图之前，是否需要在WebStorm中执行一些配置？

The generated source map works in all popular browsers and let's me debug the original sources in them, so why the WebStorm doesn't work? Do I need to perform some configuration in WebStorm before using source maps?

我使用的当前WS版本是142.4148，调试是通过Chrome扩展完成的。我会感谢任何关于如何在这里设置调试的想法或教程，即使对于较旧的WS 10版本（我正在使用WS 11，因为它应该是很好地与WebPack）

The current WS version I'm using is 142.4148 and debugging is done via chrome extension. I would appreciate any ideas or tutorial on how to set up debugging here, even for older WS 10 version (I'm using the WS 11 just because it was supposed to play nicely with WebPack)

推荐答案

Webpack源代码主要支持WebStorm 11，但您需要在 Javascript Debug 中设置远程URL映射相应地运行配置，让WebStorm知道具有Webpack输出文件（包括源映射）的目录以及sourcemap映射中指定的源文件的路径到其在项目中的位置。因此，您需要将编译的脚本Web服务器URL的映射指定到其本地路径，并将源URL（源代码图中列出）映射到项目中的本地路径。
听起来很奇怪，但并不复杂。对于像您这样的配置文件，您可能需要为您的指定远程URL http：// localhost：63342 / webpack / Built '目录，其中包文件和源代码位于，$ webpack：///。 - 对于'js'目录。这对我来说很好...
我们计划发布一个有关webpack调试的博文，现在我可以建议看一下 https://github.com/prigara/debugging-webpack 为简单例子

Webpack sourcemaps are mostly supported in WebStorm 11, but you need to set up remote URL mappings in your Javascript Debug Run configuration accordingly, to let WebStorm know the directory with the Webpack output files (including source maps) and how paths to source files specified in the sourcemap map to their location in the project. So, you need to specify mappings of the compiled script web server URL to its local path, and map source URL (listed in a source map) to the local path in the project. Sounds weird, but it's not that complicated. For the configuration file like yours, you'd likely have to specify Remote URL http://localhost:63342/webpack/Built for your 'Built' directory where bundle file and sourcemaps are located, and webpack:///. - for 'js' directory. This works fine for me... We plan to publish a blog post about webpack debugging soon... For now, I can suggest looking at https://github.com/prigara/debugging-webpack for the simple example

这篇关于在WebStorm中调试WebPack 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！