webpack和babel问题：bundle.js Uncaught SyntaxError Unexpected token import和Module not found Error Cannot resolve module

使用webpack和babel构建新项目，发现报错如下：

bundle.js:49 Uncaught SyntaxError: Unexpected token import

后来网上查找了，改了，还是报错，如下：

Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

下面是index.js文件：

import sortBy from 'lodash/collection/sortBy';
import {users} from './users';
import {User} from './User';

sortBy(users, 'name')
    .map(user => {
        return new User(user.name, user.age);
    })
    .forEach(user => {
        console.log(user.display);
    });

Webpack的配置文件如下：

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

解决办法

首先，要确保你已经安装了babel的核心包和加载器loader，使用如下命令：

$ npm install --save-dev babel-loader babel-core

确保正确的loader是babel-loader而不是babel，配置应该是下面这样：

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

一般来说，你需要告诉babel去转换你的代码。6.x之前，babel默认启用转换，但是6.x却不是，你需要明确设置babel转换代码，最简单的方式是使用一个预设preset，例如ES2015 preset，可以使用以下命令安装：

npm install babel-preset-es2015 --save-dev

安装preset完成后需要手动启用它，在项目根目录创建一个.babelrc文件用于配置一些插件，如果你已经安装ES2015，你可以在.babelrc文件中启用它，如下：

{
  "presets": ["es2015"]
}