（node.js）（react.js）（webpack）（babel）Uncaught SyntaxError：意外的令牌导入

Question

我正在尝试通过发出命令node server.js来运行react app，但是它给出了一个错误：

  

未捕获的SyntaxError：意外的令牌导入bundle.js：47

的package.json

   {
  "name": "helloreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yash",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.14.0"
  }
}

webpack命令我给的是bundle：

  webpack ./public/main.js ./public/bundle.js

main.js

   import Hello from './hello.jsx';
   import World from './world.jsx';

webpack.config.js

    var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('../index.js'); // use inside the npm package

// We use the NODE_ENV in our automation commands to differentiate environments
var production =
  process.env.NODE_ENV === 'production' ||
  process.env.NODE_ENV === 'preprod';

// Setup our plugins.
var plugins = [
  // attaches the webpack-generated JS to our main HTML file
  new HtmlWebpackPlugin({template: './src/index.html'}),
  // create global access to the NODE_ENV within our Webpacked code:
  new webpack.DefinePlugin({
    __ENV__: JSON.stringify(process.env.NODE_ENV)
  }),
  // http://gaearon.github.io/react-hot-loader/getstarted/
  new webpack.HotModuleReplacementPlugin(),
  // Mac doesn't care about case, but linux servers do, so enforce...
  new CaseSensitivePathsPlugin()
];

// In production we do a bit more...
if (production) {
  plugins.concat(
    [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]);
}

const devEntry = [
    'webpack-dev-server/client?http://0.0.0.0:3000', // tells client where to get hot reloads
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
  ];
const prodEntry = [
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
];

const theEntry = (production) ? prodEntry : devEntry;

module.exports = {

  // Bundle to our dist folder as a main.js file.
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },

  devtool: 'sourcemap',

  // Our master entry point.
  entry: theEntry,

  // Extra helpers to make require or include easier.
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },

  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      // in dev only, hotload
      loader: production ? 'babel' : 'react-hot!babel',
      // other babel options are specified in .babelrc
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }]
  },

  plugins: plugins
};