在IntelliJ / WebStorm中调试Webpack / Browserify React应用

Question

我遵循了我在网上找到的几乎所有指南，并且无法使IntelliJ中的调试器停在断点处。

我正在用路由器开发React应用程序。 后端在Play Framework中。

我尝试使用生成源地图。 这来自gulpFiles：

var bundler = watchify(browserify('./frontend/app.jsx', { debug: true }).transform(babel, {
        presets: ["es2015","react","stage-3"],
        plugins: [
            "transform-decorators-legacy",
            "transform-runtime"
        ]
    }));

源地图已生成； 我可以在Chrome调试器中进行调试，但不能在IntelliJ中进行调试。 我只看到控制台输出。

我尝试使用webpack生成：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');

var config = {
    entry: APP_DIR + '/app.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel-loader'
            }
        ]
    },
    devtool: "source-map"

};

module.exports = config;

同样，我无法在IntelliJ的断点处停止。

我像这样配置JavaScript调试：

Name: React Debug
URL: http://localhost:9000/index
Remote URLs of local files (optional) : ./frontend

仍然没有运气和断点不起作用。 我想念什么？

Answer 1

我设法使其与Webpack一起使用。 我正在使用npm任务来运行webpack而不是：

webpack -d --watch

正如到处建议的那样。 我用这个：

webpack --debug --output-pathinfo --watch