title: ES6 Webpack Relative imports - Module not found: Error: Cannot resolve module
body: <p>I'm trying to find some information about Webpack and relative imports when working with ES6 and Babel.</p>
  
  <p>I have an import line in a simple entry point in my app:</p>
  
  <pre><code>// app.es6
  import * as sayHello from 'sayHello';
  console.log(sayHello());
  </code></pre>
  
  <p><code>sayHello.es6</code> is the same directory as <code>app.es6</code>. (The contents of <code>sayHello.es6</code> is not significant).</p>
  
  <p>When I run the Webpack compiler via the command line:</p>
  
  <pre><code>$ webpack
  </code></pre>
  
  <p>I get the following error:</p>
  
  <pre><code>ERROR in ./app/app.es6
  Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app
  </code></pre>
  
  <p>This is solved by setting the path to relative:</p>
  
  <pre><code>// app.es6 - note the ./ in the import
  import * as sayHello from './sayHello';
  console.log(sayHello());
  </code></pre>
  
  <p>This is a bit of a pain because it's different to the example es6 code on Babel website under the Modules section.</p>
  
  <p>Here is my Webpack config:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
    entry: [
      'babel-polyfill',
      './app/app.es6'
    ],
    output: {
        publicPath: '/',
        filename: './dist/app.js'
    },
    debug: true,
    devtool: 'source-map',
    module: {
      loaders: [
        {
          test: /\.js|\.es6$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query:
          {
            presets:['es2015']
          }
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.es6'],
    },
  };
  </code></pre>
  
  <p><strong>Question: Does any one know why there is this difference? Or where the relevant information regarding ES6 module imports is in the Webpack documentation?</strong></p>