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,一切正常运行