Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import
<p>I'm new to Webpack and running into a problem following <a href="http://jarstingstall.github.io/getting-started-with-webpack-part-3/" rel="noreferrer">this tutorial</a>.</p>

<p>It seems the webpack.config.js isn't setting up <code>babel-loader</code> correctly but I'm not sure.In the console I see the following error:</p>

<pre><code>bundle.js:49 Uncaught SyntaxError: Unexpected token import
</code></pre>

<p>Which refers to the line <code>import sortBy from 'lodash/collection/sortBy';</code> of my <code>index.js</code>. So I assume it's a babel transpiling problem(not allowing the <code>import</code> syntax of ES6?) </p>

<p>Here is the complete <code>index.js</code> file </p>

<pre><code>import sortBy from 'lodash/collection/sortBy';
import {users} from './users';
import {User} from './User';

sortBy(users, 'name')
    .map(user =&gt; {
        return new User(user.name, user.age);
    })
    .forEach(user =&gt; {
        console.log(user.display);
    });
</code></pre>

<p>And <code>webpack.config.js</code> looks like this:</p>

<pre><code>module.exports = {
    entry: './src/index.js',
    output: {
        path: './public/',        
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './public/'
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel'}
        ]
    }
} 
</code></pre>

<p>I've searched through other questions that looked like they relate to the problem <a href="https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token">here</a> and <a href="https://stackoverflow.com/questions/35965812/webpack-babel-react-uncaught-syntaxerror-unexpected-token">here</a> as well as googling around but haven't found a solution or reason why I'm getting the error yet. Maybe the tutorial is out of date.Any guidance how to fix this issue would be much appreciated!  </p>

<p><strong>UPDATE</strong></p>

<p>The specific babel loading error was resolved by following the steps outlined in  answer posted below by Alexandre Thebaldi.</p>

<p>However, a new error occurred - 
<code>Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'</code> </p>

<p>If you are working through <a href="http://jarstingstall.github.io/getting-started-with-webpack-part-one/" rel="noreferrer">this tutorial</a> and encounter this error, it is most likely caused by an incorrect path in the <code>index.js</code>,specifically the fact that the <code>lodash/collections</code> directory seems to no longer exist. I managed to resolve this second error by simply changing the path to <code>lodash/sortBy</code>.</p>

<p><strong>NOTE</strong></p>

<p>Be sure to first check that <code>lodash</code> is installed in <code>node_modules</code> and the path is correct manually before changing it.</p>