webpack构建react项目----实战篇2

上篇提到了webpack搭建react项目的整个步骤，但是写法主要是react15版的写法，这篇主要是用react16版的写法来配置，主要是和低版的形成一个对比。

从目录上来看，配置文件什么的都基本上差不多，步骤见上篇。

最大的不同就是组件里面app.js的写法的差异，模块的接收和暴露，一个是es5写法，一个是es6的写法。另外就是react高低版本对组件的声明方式的不同。

//app.js高版
import React from 'react';
import imgs from '../img/a.jpg'
class App extends React.Component{
	constructor(props){
		super(props)
	}
	tap(){
		console.log('hello wolrd')
	}
	
	render(){
		return(
			

				
hello
				事件
				
				

			
		)
	}
}


export default App;

//app.js低版react
var React = require("react");
import imgs from "../img/a.jpg" 

var Demo = React.createClass({
	render(){
		return(
			

				
hello
				
				
			
		)
	}
})	
module.exports = Demo

//es5
/* 模块的接收和暴露*/
var React = require('react');
module.exports = App
/* 组件的声明*/
var Demo = React.createClass({})


//es6
/* 模块的接收和暴露*/
import React from 'react';
export default App;
/* 组件的声明*/
class App extends React.Component{}

其他的基本是没啥区别的。