ChromeでBabelとWebpackでブレークポイントを設定できません

Question

"new"スタックを使用して新しいプロジェクトを開始しました：React + Webpack + Babel。

私はこの作業を探求していますが、私はクロムでデバッグに関する問題に直面しています。 BabelとWebpackを使用すると、ソースファイルのいくつかの行にブレークポイントを設定できません。 （私はソースマップを作成する）。 私はJSXファイルをデバッグしたいと考えています。

私は問題を再現するために少しプロジェクトを設定しました。ここで https://github.com/pierre-hilt/babel_webpack_sourcemap.git

私の設定です：

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

module.exports = { 
    devtool: 'source-map', 
    entry: './build/index', 
    output: { 
    path: path.join(__dirname, 'static'), 
    filename: '[name].bundle.js', 
    publicPath: '/', 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: "source-map-loader" 
     } 
     ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
} 

babelrc：

{ 
    "presets": [ 
    "es2015", 
    "react" 
    ], 
    "plugins": [] 
} 

App.jsx（私は6行目でブレークしてみたが、それは不可能です...）

import React, { Component, PropTypes } from 'react'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     title: props.title, 
    }; 
    } 

    changeTitle(newTitle) { 
    this.setState({ title: newTitle }); 
    } 

    render() { 
    return (
     <div> 
     This is {this.state.title} 
     </div> 
    ); 
    } 
} 

App.propTypes = { title: PropTypes.string }; 

export default App; 

私は別のdevtoolオプション（安い、モジュール、...）を試しました。 バベルローダーも試しましたが、どちらもうまくいきません。

ご存知ですか？それは既知の問題ですか？

Answer 1

OK、うまくいく回避策が見つかりました。

babelrc

{ 
    "presets": [ 
    "react" 
    ], 
    "plugins": [] 
} 

バベルスクリプト

"babel": "babel client -d build --source-maps", 

WebPACKのコンフィグ私は最初のバベルとJSX transpileだけで、その後、私はバベルローダとのWebPACKとES2015をtranspile

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

module.exports = { 
    devtool: 'source-map', 
    entry: './build/index', 
    output: { 
    path: path.join(__dirname, 'static'), 
    filename: '[name].bundle.js', 
    publicPath: '/', 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: "source-map-loader" 
     } 
     ], 
    loaders: [ 
    { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', // 'babel-loader' is also a legal name to reference 
     query: { 
     presets: ['es2015'] 
     } 
    } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
} 

。

最後にどこにでもブレークポイントを設定できるソースファイルがあります。