前言
工欲善其事，必先利其器。为了更好的学习React，我们先简要的把开发环境搭建起来。本文主要介绍使用webpack搭建React项目，如果你对React或es6的基础语法还不了解，建议先去学习学习。
基础环境
node/npm
webpack
现代JavaScript程序应用的模块打包器。它主要分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss、less、TypeScript），将其转换和打包为合适的格式供浏览器使用。
项目创建
创建一个文件夹first-react，进入该目录，在该目录下打开一个终端，执行npm init。根据提示输入内容，也可以直接按回车键跳过。执行完后目录中会多一个package.json文件，这是项目的核心文件，包含包依赖管理和脚本任务。
mkdir first-reactcd first-react npm init
安装react, react-dom, webpack
在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。
npm install react react-dom webpack --save
项目目录和源码
--your project ??|--build(项目打包输出目录) ??????|--bundle.js(该文件是由webpack打包生成) ??????|--index.html ??|--src ??????|--index.js ??|--webpack ??????|--webpack.config.js ??|--package.json ??????
index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div id="app"> ???/* react DOM*/ ???</div> ???<script src="../build/bundle.js"></script></body></html>
index.js
import React, { Component } from ‘react‘;import { render } from ‘react-dom‘;render( ???<div>Hello React!</div>, ???document.getElementById(‘app‘));webpack.config.js
const path = require(‘path‘);module.exports = { ???entry: path.resolve(__dirname, ‘../src/index.js‘), //指定入口文件，程序从这里开始编译,__dirname当前根目录, ../表示上一级目录, ./同级目录 ???output: { ???????path: path.resolve(__dirname, ‘../build‘), // 输出的路径 ???????filename: ‘bundle.js‘ ?// 编译后文件 ???}, ???module: { ???????rules: [ ???????????{ ???????????????test: /\.(js|jsx)$/, ???????????????use: { ???????????????????loader: ‘babel-loader‘, ???????????????????options: { ???????????????????????presets: [‘es2015‘, ‘react‘], ???????????????????} ???????????????}, ???????????????exclude: /node_modules/ ???????????} ???????] ???}}这里如果在项目根目录直接进行webpack构建会报错(构建命令：webpack --config webpack/webpack.config.js)，因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
babel-loader: babel加载器
babel-preset-es2015: 支持es2015
babel-preset-react: jsx 转换成js
最后再次进行构建，然后点击build/index.html，即可看到Hello React！
webpack --config webpack/webpack.config.js // 更多webpack命令尽在webpack --help查阅
接下来我们进行一下简单的优化，执行效果一致。
index.js
import React from ‘react‘;import { render } from ‘react-dom‘;import App from ‘./App‘const renderDom = Component => { ???render( ???????<Component />, ???????document.getElementById(‘app‘) ???);}renderDom(App);在项目根目录下新建json文件.babelrc，将babel的配置单独提取出来。
{ ?"presets": [ ???"es2015", ???"react" ?]}webpack.config.js文件作相应的调整。
const path = require(‘path‘);const webpack = require(‘webpack‘);module.exports = { ???entry: path.resolve(__dirname, ‘../src/index.js‘), //指定入口文件，程序从这里开始编译,__dirname当前根目录, ../表示上一级目录, ./同级目录 ???output: { ???????path: path.resolve(__dirname, ‘../build‘), // 输出的路径 ???????filename: ‘bundle.js‘ ?// 编译后文件 ???}, ???module: { ???????rules: [ ???????????{ ???????????????test: /\.(js|jsx)$/, ???????????????loader: ‘babel-loader‘, ???????????????exclude: /node_modules/ ???????????} ???????] ???}}在src下新建App.js。
import React, { Component } from ‘react‘;export default class App extends Component { ???render() { ???????return ( ???????????<div>Hello React!</div> ???????); ???}}
以脚本方式执行构建
编辑package.json，加入自定义脚本，在项目根目录执行npm run dev即可达到上面一样的效果。
"scripts": { ???"dev": "webpack --config webpack/webpack.config.js" ?}搭建前端服务器
可以发现，每次都要重新构建然后刷新index.html，才能得到最新的效果，开发效率极低。幸好webpack-dev-server可以帮助我们解决这个问题，webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement（模块热替换：前端代码变动后无需刷新整个页面，只把变化的部分替换掉）。OK，让我们开始安装和配置webpack-dev-server。
npm install webpack-dev-server --save
在项目根目录下创建bin目录，进入bin目录，创建devserver.js文件，编辑如下
‘use strict‘const WebpackDevServer = require(‘webpack-dev-server‘);const config = require(‘../webpack/webpack.config‘);const webpack = require(‘webpack‘);const path = require(‘path‘);const compiler = webpack(config);const server = new WebpackDevServer(compiler, { ???contentBase: path.resolve(__dirname, ‘../build‘), //默认会以根文件夹提供本地服务器，这里指定文件夹 ???historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html ???port: 9090, //如果省略，默认8080 ???publicPath: "/"});server.listen(9090, ‘localhost‘, function (err) { ???if (err) throw err})编辑package.json，创建一条脚本
"scripts": { ???"dev": "node bin/devserver" ?}最后，单独在该项目根目录起一个终端，执行npm run dev，启动成功后访问http://localhost:9090。如果看到Hello React!，恭喜你。 最后再做一下简单的测试，将App.js修改如下后保存，可以发现，项目会自动重新编译运行，刷新浏览器即可看到最新的更改。好了，暂时先写这么多。
import React, { Component } from ‘react‘;export default class App extends Component { ???render() { ???????return ( ???????????<div> ???????????????<h1>Hello React</h1> ???????????????<h2>Hello React</h2> ???????????</div> ???????); ???}}基于webpack的React项目搭建(一)
原文地址：http://www.cnblogs.com/raion/p/8053799.html