这篇文章不是有关React和Webpack的教程，只是一篇能够让你快速上手使用目前这两种热门技术的前端指南，并假设你对两者有一个基本的认识。如果你想先行了解下React，可以放肆的移步至 React官方教程，如果你已经使用了其他的模块加载与资源打包技术，不妨也来看看 Webpack 提供的思路。
webstorm+react+webpack
强烈推荐使用webstorm！。（当然你完全可以使用诸如atom，Sublime之类的编辑器，但之所以选择webstorm是因为它默认支持对react JSX 的语法高亮以及可以手动开启Emmet对jsx的支持，棒棒哒~）
首先请这么组织你的项目结构：
--your project |--app |--components |--productBox.jsx |--main.js |--build |--index.html |--bundle.js(该文件是webpack打包后生成的)
用npm安装react、webpack
默认已经安装了nodejs，并输入：npm init根据提示输入内容并创建package.json文件
然后依次输入：
npm install react --save-dev
npm install webpack --save-dev
安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中。
创建webpack.config.js配置文件
新建一个名为webpack.config.js的文件，它应该长这个样：
var path = require('path'); module.exports = { entry: path.resolve(__dirname, './app/main.js'), output: { path: path.resolve(__dirname, './build'), filename: 'https://www.jb51.net/bundle.js', } };
其中entry指定了webpack的入口程序，好比c++和java中的main程序一样，我们把最终要插入到页面指定位置的react模板写入main.js中：
app/main.js
var React = require('react'); var AppComponent = require('./components/productBox.js'); React.render(<AppComponent />, document.getElementById('content'));
以及引入的自定义react组件：
app/components/productBox.js
var React = require('react'); var ProductBox = React.createClass({ render: function () { return ( <div className="productBox"> Hello World! </div> ); } }); module.exports = ProductBox;
而output则指定了webpack打包成功之后文件名称以及文件的存放位置。
依照之前指定的项目结构，我们可以在index.html中直接引入打包生成的bundle.js，像这样：
build/index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div></div> <script src="https://www.jb51.net/bundle.js"></script> </body> </html>
安装并启用webpack-dev-server
webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！
我们先打开package.json，并找到scripts代码块。在没引入webpack-dev-server之前，我们运行这个项目的姿势是这样的：
修改scripts为
"scripts": { "build": "webpack" }
并且执行：
npm run build
项目就跑起来啦，但是每次修改程序我们都要手动输入npm run build来跑项目，这无疑是一件非常蛋疼的事情。但有了webpack-dev-server光环，我们的姿势应该是这样的：
为scripts添加
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }
ps：dev里各属性值的意思是：
webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
--devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress: 显示合并代码进度
--colors: 在命令行中显示颜色
--content-base build:指向设置的输出目录
并且在index.html里加入：
build/index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div></div> <script src="https://localhost:8080/webpack-dev-server.js"></script> <script src="https://www.jb51.net/bundle.js"></script> </body> </html>
在webpack.config.js的入口处加入：
var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], output: { path: path.resolve(__dirname, './build'), filename: 'https://www.jb51.net/bundle.js', } };
以便在进行改动时浏览器可以自动刷新。
最后执行：
npm run dev
你只要在浏览器打开这个地址：:8080，webpack-dev-server会为你准备好一切，你只要敲一敲键盘，save一下，所见即所得。
Webpack Loader