无法在Chrome中使用Babel和Webpack设置断点

Question

我已经使用“新”堆栈启动了一个新项目：React + Webpack + Babel。

我正在努力探索这项工作，并且我正面临一个在Chrome中调试的问题。当我使用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选项（便宜，模块，...）。 我也试过Babel装载机，但是也不行。

你有什么想法吗？这是一个已知的问题吗？

Answer 1

好的，我发现一个解决方法，工作正常！

babelrc

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

通天脚本

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

的WebPack配置

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

我第一次transpile JSX与巴贝尔而已，然后我用transpile巴贝尔装载机的WebPack ES2015。

最后我得到了源文件，我可以在任何地方设置断点！