webpack编译成功 console 提示class is a reserved identifier

app.js

import React from 'react';

import Hello from './hello.jsx';
main();

function main() {
    React.render(<Hello />, document.getElementById('app'));
}

hello.jsx

import React from 'react';

export default class Hello extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

webpack.config.js

var path = require('path');
var config = {
  entry: path.resolve(__dirname, 'main.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel' 
    }]
  }
};

module.exports = config;

webpack执行结果
Hash: c02ddfd9c43ddfa17021
Version: webpack 2.1.0-beta.5
Time: 8695ms

Asset    Size  Chunks             Chunk Names

bundle.js 619 kB 0 [emitted] main

158 hidden modules

测试页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="app"></div>

    <script src="build/bundle.js"></script>
  </body>
</html>

浏览器显示无结果,但是控制台报错 SyntaxError: class is a reserved identifier @ http://localhost/build/bundle.js:10097

包名写错了

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

添加一个.babelrc文件，然后添加如下代码

{
  "presets": ["es2015", "stage-0", "react"]
}

记得安装babel-preset-es2015和babel-preset-react,babel-preset-stage-0

npm ERR! 404 Registry returned 404 for GET on http://registry.npmjs.org/react-preset-e...
npm ERR! 404
npm ERR! 404 'react-preset-es2015' is not in the npm registry.

【热门文章】