jsx nie odpowiada debuggerowi pomimo map źródłowych webpack

Question

Uczę się React i JSX i używam WebPacka do kompilacji, ale kiedy wrzucam "debugger" do mojego komponentu, linia nie jest dopasowana, gdy jestem w Narzędziach Chrome Dev Zakładka Źródła (ogólnie źródła nie odzwierciedlają tego, co mam w moim pliku app.jsx). Karta React też się nie ładuje. Poniżej jest moje webpack.config:

module.exports = { 
    context: __dirname, 
    entry: "./api_assignment.jsx", 
    output: { 
    path: "./", 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react'] 
     } 
     } 
    ] 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ["", ".js", ".jsx"] 
    } 
}; 

// WebPACK screenshot

Answer 1

Jeśli ładujesz html z pliku lokalnego, a nie serwer WebPack , musisz włączyć opcję rozszerzenia React Developer Tools "Zezwalaj na dostęp do adresów URL plików".