In Babel und Webpack kann kein Haltepunkt in Chrome festgelegt werden

Question

Ich habe ein neues Projekt mit dem "neuen" Stapel gestartet: React + Webpack + Babel.

Ich versuche, diese Arbeit zu erkunden, und ich habe ein Problem mit dem Debuggen in Chrom konfrontiert. Ich kann in einigen Zeilen in Quelldateien keine Haltepunkte setzen, wenn ich Babel und Webpack verwende. (Ich erstelle Quellkarten). Ich möchte JSX-Dateien debuggen können.

Ich habe ein kleines Projekt eingerichtet, um das Problem zu reproduzieren. https://github.com/pierre-hilt/babel_webpack_sourcemap.git

Hier ist meine Konfiguration:

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 (Ich versuche, 6 auf Linie zu brechen, aber es ist unmöglich, ...)

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; 

Ich habe versucht verschiedene Devtool Optionen (billig, Modul, ...). Ich habe auch versucht, Babel Loader, aber funktioniert auch nicht.

Haben Sie eine Idee? Ist es ein bekanntes Problem?

Answer 1

OK, ich habe einen Workaround gefunden, der einwandfrei funktioniert!

babelrc

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

Babel Skript

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

webpack Config

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

I transpile JSX zuerst mit babel nur dann mit babel Lader und webpack I ES2015 transpile.

Am Ende habe ich Quelldateien, wo ich überall Breakpoints setzen kann!