1、继续添加依赖
cnpm install babel-preset-react --save-dev //react解析规则
cnpm install react --save-dev
cnpm install react-dom --save-dev
2、在query中加入react
用于辅助react相关的解析
module: {
loaders: [{
test: path.join(__dirname, 'es6'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
3、编写组件
Component1.js
import React from 'react';
class Component1 extends React.Component {
render() {
return (
<div>Hello World</div>
)
}
}
export default Component1;
4、编写业务逻辑
main2.js
import React from 'react';
import ReactDom from 'react-dom';
import Component1 from './Component1.jsx';
ReactDom.render(
<Component1/>,
document.getElementById('content')
);
5、页面引用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test es6</title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html>
6、运行起来
webpack，一切正常运行