title: Webpack resolve compiles, but errors in the browser
body: <p>I am new to using webpack, I tried to use <code>resolve</code> so that I do not have to type <code>.js</code> or <code>.jsx</code> but I keep getting an error. Everything compiles fine, but I get an error on the browser.</p>
  
  <p><strong>Webpack file after this paragraph</strong></p>
  
  <p>I added resolve to my <code>webpack.config</code> and it was fine. Webpack compiled and everything is gravy, until I load the browser, where I get the same error if I did not have this line except in the browser. I can take out the <code>resolve</code> statement and get the same error on my terminal. </p>
  
  <p>Gist of it is this:</p>
  
  <p><em>import in my my module</em></p>
  
  <p><code>import AppBar from './components/AppBar';</code></p>
  
  <p><em>my resolve statement</em></p>
  
  <pre><code>module.exports = {
    ...
    resolve: {
      extensions: ['.js', '.jsx']
    },
   ...
  </code></pre>
  
  <p>Which gives the following error:</p>
  
  <pre><code>ERROR in ./app/main.jsx
  Module not found: Error: Can't resolve './components/AppBar' in 
  '/Users/auser/dev/project/app'
  </code></pre>
  
  <p>This my full <code>webpack.config</code>:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');
  
  module.exports = {
    entry: {
      app: './app/index.jsx'
    },
    devtool: 'source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    module:{
      rules: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
              loader: 'babel-loader',
              query: {
                // If you set something here, also set it in .babelrc
                presets: ['es2016', 'react'],
                plugins: ['transform-class-properties']
            }
          }
        }
      ]
  },
  plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement',
        template: './app/index-template.html'
      }),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
  ],
  output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  </code></pre>
  
  <p>Directory Structure:</p>
  
  <pre><code>├── Makefile
  ├── app
  │   ├── components
  │   │   ├── AppBar.jsx
  │   │   ├── Content.jsx
  │   │   ├── SideBar.jsx
  │   │   └── Table.jsx
  │   ├── index-template.html
  │   ├── index.jsx
  │   ├── main.jsx
  │   ├── print.js
  │   └── utils
  │       └── data-formatter.js
  ├── config.pyc
  ├── dist
  │   ├── app.bundle.js
  │   ├── app.bundle.js.map
  │   └── index.html
  ├── npm-debug.log
  ├── package.json
  └── webpack.config.js
  </code></pre>