使用webpack和eslint

Question

index.js

import './index.scss'
import { render } from 'react-dom'
// @BUG: SyntaxError Unexpected token
render((
  <div>
    aaa
  </div>
), document.getElementById('app'))

webpack.web.js

'use strict'
const resolve = require('path').resolve
const webpack = require('webpack')
const NpmInstallPlugin = require('npm-install-webpack-plugin')
const NotifierPlugin = require('webpack-notifier')
const webDir = resolve(__dirname, '../src/web')
var autoprefixer = require('autoprefixer')

module.exports = {

  entry: {
    'index.js': './src/web/index.js',
  },

  devtool: 'cheap-module-source-map',

  output: {
    pathinfo: true,
    path: 'dist/web',
    filename: '[name]',
    sourceMapFilename: '[name].map',
  },

  module: {
    preLoaders: [
      { test: /\.js$/, include: webDir, loader: 'eslint' },
    ],
    loaders: [
      { test: /\.js$/, include: webDir, loader: 'babel' },
      { test: /\.scss$/, loader: 'style!css!sass!postcss' },
      { test: /\.(svg|eot|ttf|woff|woff2)(\?.+)?$/, loader: 'url' },
    ],
  },
  postcss: function () {
    return [autoprefixer({ browsers: ['last 2 versions']})]
  },

  resolve: {
    // 和material-ui冲突了
    // alias: {
    //   'react': 'react-lite',
    //   'react-dom': 'react-lite',
    // },
    extensions: ['', '.js'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main', 'style'],
  },

  plugins: [
    new NpmInstallPlugin({ save: true }),
    new NotifierPlugin({ alwaysNotify: true }),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      Promise: 'bluebird',
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      }
    }),
  ],
}

.eslintrc

{
  "extends": ["rackt"],
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "eol-last": 1,
    "valid-jsdoc": 0,
    "indent": 1,
    "semi": 1,
    "strict": [1, "global"],
    "no-console": 0,
    "no-unused-vars": 1,
    "comma-dangle": [1, "always-multiline"],
    "array-bracket-spacing": [1, "never"],
    "object-curly-spacing": [1, "always"],
    "no-multiple-empty-lines": [1, { max: 2 }],
  }
}

package.json

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "dev:web": "webpack -w --progress --config task/webpack.web"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-async-to-bluebird": "^1.0.0",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "eslint": "^2.1.0",
    "eslint-config-rackt": "^1.1.1",
    "eslint-config-xo-react": "^0.4.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-react": "^3.16.1",
    "node-sass": "^3.4.2",
    "npm-install-webpack-plugin": "^2.0.2",
    "postcss-loader": "^0.8.1",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.13",
    "webpack-notifier": "^1.2.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.5.0",
    "bluebird": "^3.3.1",
    "material-ui": "^0.15.0-alpha.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-tap-event-plugin": "^0.2.2"
  }
}

当我运行npm run dev:web时 我得到了SyntaxError

ERROR in ./src/web/index.js
Module build failed: SyntaxError: /Users/funkyLover/Desktop/electron-store/src/web/index.js: Unexpected token (5:2)
  3 | // @BUG: SyntaxError Unexpected token
  4 | render((
> 5 |   <div>
    |   ^
  6 |     aaa
  7 |   </div>
  8 | ), document.getElementById('app'))

我根本不知道......