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 Namesbundle.js 619 kB 0 [emitted] main
158 hidden modules
测试页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<p id="app"></p>
<script src="build/bundle.js"></script>
</body>
</html>浏览器显示无结果,但是控制台报错 SyntaxError: class is a reserved identifier @ http://localhost/build/bundle.js:10097
添加一个.babelrc文件，然后添加如下代码
记得安装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.
包名写错了