Préservation des noms de variables dans la portée définie par Webpack dans JSX sourcemap

Question

J'ai un exemple de travail Hello World utilisant Webpack, Babel et React. Lorsque je définis un point d'arrêt dans Chrome DevTools, Chrome indique que tous les symboles importés ne sont pas définis dans la portée actuelle.

Si je laisse filer de code, il fonctionne comme prévu. Réagissez avec succès "Hello, World!" Le problème est que Chrome voit la mauvaise portée.

EDIT: Cela se produit car Webpack renomme mes variables. Comment puis-je conserver mes noms de variables pour pouvoir déboguer plus confortablement?

Ma configuration de webpack est ci-dessous.

var path = require('path'); 
var webpack = require('webpack'); 
var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 

var public_dir = __dirname + '/public'; 

module.exports = { 
    entry: './behavior/house/entry.jsx', 

    cache: true, 
    debug: true, 
    devtool: 'source-map', 

    output: { 
     path: __dirname + '/public', 
     filename: 'behavior.js', 
     sourceMapFilename: 'behavior.js.map' 
    }, 

    resolve: { 
     extensions: ['', '.js', '.jsx'], 
     root: [ 
      path.resolve('./behavior/house'), 
      path.resolve('./behavior/vendor') 
     ] 
    }, 
    devServer: { 
     contentBase: public_dir, 
     filename: 'behavior.js', 
     host: '0.0.0.0', 
     colors: true, 
     noInfo: true 
    }, 
    plugins: [ 
     new BrowserSyncPlugin({ 
      host: 'localhost', 
      port: 3000, 
      server: { baseDir: [public_dir] } 
     }) 
    ], 
    module: { 
     preLoaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'source-map' 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       cacheable: true, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react'], 
        retainLines: true, 
        cacheDirectory: true 
       } 
      } 
     ] 
    } 
}; 

Answer 1

J'ai remarqué cela aussi. Si vous regardez la liste des variables dans la portée, les importations apparaissent comme quelque chose comme _React ou _react2.

Il semble que webpack renomme certaines des variables lorsqu'il regroupe tous les fichiers. Les sourcemaps maintiennent vos points d'arrêt synchronisés, mais la console ne mappe pas vos noms de variables à votre code source es6.