Why I cannot see ES6 in my chorme devtools?

Question

This what I see in Chrome

This is my webpack.config.js

module.exports = {
  entry: {
    vendors: [...],
    bundle: './app/index.js',
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
    sourceMapFilename: "[name].js.map",
  },
  module: {
    loaders: [{
      test: /\.json$/,
      loaders: ['json-loader'],
    },{ 
      test: /\.(js)$/,
      loader: 'string-replace',
      exclude: /node_modules/,
      query: {
        search: '/api/',
        replace: !!apiUrl ? `${apiUrl}:${apiPortNumber}/api/` :   '/api/',
        flags: 'g'
      }
    },{
      test: /\.(js)$/,
      loader: 'string-replace',
      exclude: /node_modules/,
      query: {
        search: '/dev-sse/',
        replace: `${apiUrl}:`,
        flags: 'g'
      }
    },{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        cacheDirectory: true,
        plugins: ['transform-runtime', 'transform-decorators-legacy'],
        presets: ['es2015', 'react', 'stage-0']
      }
    }
  ]
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin('vendors', 'commons.js'),
  new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
  }),
  new CopyWebpackPlugin([
    { from: './assets/**/*' }
  ])
],
  devtool: 'cheap-module-eval-source-map',
};

I tried to change devtools on a variety of values, but in the end I get the same, project also used webpack-dev-server

So I want to know where I could make a mistake

What I want

do you mean you can not see your imnport statements in chrome dev tool? — nikhil mehta, Dec 13 '16 at 13:08
I want to see these files as they are. Writing in the ES6 style. And I see the compiled files — ZPPP, Dec 13 '16 at 13:38
Possible duplicate of [How do I generate sourcemaps when using babel and webpack?](http://stackoverflow.com/questions/30870830/how-do-i-generate-sourcemaps-when-using-babel-and-webpack) — Ori Drori, Dec 13 '16 at 16:32
You need a source map - see the duplicated question in the link above. — Ori Drori, Dec 13 '16 at 16:33
I guess since you are using babel-loader with es2015presets loader must be converting the code to es5 and thats the reason you are not able to see it. — nikhil mehta, Dec 14 '16 at 07:20

score 0 · Answer 1 · answered Dec 13 '16 at 17:40

0

Update the devtool to devtool: 'eval-source-map' .

answered Dec 13 '16 at 17:40

Arun Kumar M S

173
12

it does nothing but adds the map to bundle as data instead of creating a .map file. see [here](http://cheng.logdown.com/posts/2016/03/25/679045) – nikhil mehta Dec 14 '16 at 07:24

Why I cannot see ES6 in my chorme devtools?

1 Answers1