Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.

If you see the message `Source Map Detected`, the original file should *already* appear on the side file tree or the file explorer via <kbd>Crl</kbd> + <kbd>P</kbd>.  If you don't know the original file name, you can open the source map file itself.

1. The source map path can be identified by a `//# sourceMappingURL=` comment or the `X-SourceMap` header:

   [![sourceMappingURL][1]][1]

2. Open up the source map via url and look for the `sources` property for the original file name:

   [![source map file][2]][2]

3. The original file should be visible in the sources panel:

   [![original file in sources panel][3]][3]

### If you *don't* see the message `Source Map Detected` 

You can manually add an external source map by right clicking and selecting `Add Source Map`:

[![Add source map][4]][4]

### Additional Resources

* If that still doesn't work, you can try a [Source Map Validator][5]
* For webpack specifically, you can configure the [`devtool`][6] property

  [1]: https://i.stack.imgur.com/vMxCi.png
  [2]: https://i.stack.imgur.com/Kgi3K.png
  [3]: https://i.stack.imgur.com/2UUrT.png
  [4]: https://i.stack.imgur.com/ojoDU.png
  [5]: https://sourcemaps.io/
  [6]: https://webpack.js.org/configuration/devtool/

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.

These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/70nAz.png


config:

    var path = require("path");
    var webpack = require("webpack");
    var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
    
    
    const PATHS = {
      app: path.join(__dirname, '../client'),
      build: path.join(__dirname, '../public')
    };
    
    module.exports = {
    
    
      entry: {
        app: PATHS.app + '/app.js'
      },
      output: {
        path: PATHS.build,
        filename: '[name].js'
      },
    
    
      devtool: "source-map",
      module: {
        loaders: [
          {
            test: /\.js?$/,
            loader: 'babel-loader',
            include: [
              path.resolve(__dirname, 'client'),
            ],
            exclude: /node_modules/
    
          },
    
          {
            test: /\.css/,
            loader: "style!css"
          }
        ]
      },
      resolve: {
        // you can now require('file') instead of require('file.js')
        extensions: ['', '.js', '.json']
      } ,
      plugins: [
        new WebpackBuildNotifierPlugin()
      ]
    
    };



Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

One option for webpack users is to install [**directory-named-webpack-plugin**][1]

Install, and then add the following to Webpack's config file:

```js
var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}
```

When using `require("component/foo")` *and* the path `"component/foo"` is resolved to a directory, Webpack will try to look for `component/foo/foo.js` as the entry point.

**Caution**: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether.  Unless they also have similar functionality, you may lose *Go To Definition* and *Intellisense* support by not providing the full reference statically.


[1]: https://www.npmjs.com/package/directory-named-webpack-plugin

In my React and Webpack project, I have the following project structure of React components:

    Component/
    ├── Component.jsx
    ├── index.jsx
    └── styles.css
The `index.jsx` file simply imports and exports `Component.jsx`; the reason being that in files that require it, it allows the usage of the following:

    import Component from '../Component'
    
as opposed to

    import Component from '../Component/Component'

However this seems like it may be an unnecessary extra step which requires all new components to follow suit.

With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have `Component.jsx` and `styles.css` in my directory, but not have to use the name twice in my `import` declaration.