33.安装babel及相关依赖

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

34.修改webpack.config.js配置文件,修改内容如下

module.exports = {	entry:  __dirname + "/app/Greeter.js",	output: {		path: __dirname + "/public",		filename: "bundle.js"	},	devServer:{		contentBase:"./public",		historyApiFallback:true,		inline:true	},	module:{		loaders:[			{				test:/\.json$/,				loader:"json-loader"			},			{				test:/\.js$/,				exclude:/node_modules/,				loader:'babel-loader',				query:{					presets:['es2015','react']				}			}		]	}}

35.安装react和react-dom模块

cnpm install --save-dev react react-dom

36.修改main.js文件,修改内容如下

// var config = require("../config.json");// module.exports = function() {//   var greet = document.createElement('div');//   greet.textContent = config.greetText;//   return greet;// };import React,{Component} from 'react';import config from '../config.json';class Main extends Component{	render(){		return (			
    
     				{config.greetText}			
    
		);	}}export default Main

37.修改Greeter.js文件,修改内容如下

// var greeter = require('./main.js');// document.getElementById('root').appendChild(greeter());import React from 'react';import {render} from 'react-dom';import Main from './main';render(
    ,document.getElementById('root'));

38.使用webpack命令打包

webpack

39.在浏览器中打开index.html文件,输出内容如下

本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1899060