Отладка webpack/браузера приложение React в IntelliJ/WebStorm

Question

Я следил за почти всеми руководствами, которые я нашел в Интернете, и я не могу сделать отладчик в IntelliJ stop на контрольных точках.

Я разрабатываю приложение React с маршрутизатором. Backend находится в 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. я использую задачу НПМ запустить WebPack и вместо:

webpack -d --watch 

, как это было предложено везде. Я использовал это:

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