1、官方地址：

中文文档地址 

第一步、安装全局包

$ npm install babel -g$ npm install webpack -g$ npm install webpack-dev-server -g

第二部、创建项目目录

创建一个根目录，目录名为：react02，再使用 npm init 初始化，生成 package.json 文件：

E:\localProject\react02>npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install 
    
      --save` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.name: (react02) react02-webpackreact02-webpackversion: (1.0.0)description: 使用webpack构建react项目entry point: (index.js)test command:git repository:keywords:author: liuxinzhoulicense: (ISC)About to write to E:\localProject\react02\package.json:{  "name": "react02-webpack",  "version": "1.0.0",  "description": "使用webpack构建react项目",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "liuxinzhou",  "license": "ISC"}Is this ok? (yes) yesE:\localProject\react02>
    

第三步、添加依赖包及插件

因为我们要使用 React, 所以我们需要先安装它，--save 命令用于将包添加至 package.json 文件。

$ npm install react --save$ npm install react-dom --save

同时我们也要安装一些 babel 插件

$ npm install babel-core$ npm install babel-loader$ npm install babel-preset-react$ npm install babel-preset-es2015

第四步、创建文件

index.html

App.jsx

main.js

webpack.config.js

第五步、设置编译器，服务器，载入器

配置webpack.config.js

var config = {   entry: './main.js', //entry: 指定打包的入口文件 main.js。   output: {      path:'./',      filename: 'index.js',   },	//output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。   devServer: {      inline: true,      port: 7777   },	//devServer：设置服务器端口号为 7777，端口号你可以自己设定 。   module: {      loaders: [ {         test: /\.jsx?$/,         exclude: /node_modules/,         loader: 'babel',			         query: {            presets: ['es2015', 'react']         }      }]   }	//module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。   //当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。}module.exports = config;

配置package.json

{  "name": "react02-webpack",  "version": "1.0.0",  "description": "使用webpack构建react项目",  "main": "index.js",  "scripts": {    //"test": "echo \"Error: no test specified\" && exit 1"    "start": "webpack-dev-server --hot"    //现在我们可以使用 npm start 命令来启动服务。    //--hot 命令会在文件变化后重新载入，这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。  },  "author": "liuxinzhou",  "license": "ISC",  "dependencies": {    "react": "^15.3.2",    "react-dom": "^15.3.2"  }}

编写index.html代码

main.js

var React = require('react');var ReactDOM = require('react-dom');var MainComponets = require('./components/mainComponets.js');ReactDOM.render(  
    ,  document.getElementById('app'));

mainComponets.js

var React= require("react")module.exports=React.createClass({	render:function(){		return(			
    
				
     
我的第一个webpack构建的react项目
				
     				
     确定			
    
			)	}})

第八步、运行服务

$ npm start

通过浏览器访问 http://localhost:7777/，输出结果如下：