1.搭建前文档结构：
准备好如下图所示的文档结构：
assets：用于存放组件及webpack入口js文件，这里我把入口文件命名为 enter.js
comments:文件夹用于存放react组件
js: webpack打包后的js文件存放目录，bundle.js就是我们的打包好的文件
node_modules: 用于存放npm安装在本地的模块，建议保存在本地
index.html ： 根目录下网页入口
server.js : 用于本地开启localhost:3000 的webpack-dev-server服务器的js （后面会提到）
webpack.config.js: webpack配置文件
2.搭建前模块安装与配置文件的填写
1 //引入path模块，方便路径的拼接 2 var path=require("path"); 3 //引入webpack模块 4 var webpack=require("webpack"); 5 6 //配置文件模块 7 module.exports = { 8 //webpack入口 9 entry:[ 10 //引入webpack-dev-server并配置webpack-dev-server的域名为localhost:3000 11 ‘webpack-dev-server/client?http://localhost:3000‘, 12 //需要react组件热加载(即时修改即时展现),引入webpack-react-hot 13 ‘webpack/hot/only-dev-server‘, 14 //入口js文件 15 "./assets/enter.js" 16 ], 17 //项目文件输出 18 output: { 19 //输出路径 20 path: path.join(__dirname ,‘/js/‘), 21 //输出js文件名 22 filename: ‘bundle.js‘, 23 //公共路径 24 publicPath:‘http://localhost:3000/‘ 25 }, 26 /* 27 node模块加载，如果node模块不在本地，需要使用resolveLoader.root引入该文件夹地址 28 resolveLoader: { 29 root: path.join(__dirname, "node_modules") 30 }, 31 */ 32 33 resolve: { 34 //文件类型扩展，当书写require(module)时根据配置可以不书写文件类型后缀，本例为不用书写js后缀 35 extensions: [‘‘, ‘.js‘] 36 }, 37 //模块集 38 module: { 39 //webpack需要的loader集合 40 loaders: [ 41 { 42 //文件类型的正则表达式 43 test: /\.js$/, 44 //需要的loader的具体名称 45 loaders: [ ‘react-hot‘,‘jsx-loader‘], 46 //该类型文件所处的文件夹，不能为根目录，如果该文件夹为js组件，则该文件夹一定要包含入口js文件 47 include: path.join(__dirname,‘assets‘) 48 } 49 /* 50 { 51 test: /\.js?$/, 52 exclude: /node_modules/, 53 loader: "babel-loader", 54 query: { 55 presets: [‘es2015‘, ‘react‘] 56 } 57 }*/ 58 59 ] 60 }, 61 //插件集合 62 plugins:[ 63 //react热启动插件 64 new webpack.HotModuleReplacementPlugin(), 65 //webpack-dev-server插件，可以将错误以在console中输出而不改变页面报错 66 new webpack.NoErrorsPlugin() 67 ] 68 };
大家注意看其中的注释
关于配置文件的详细叙述及各字段意思请大家查看官网：
https://webpack.github.io/docs/configuration.html#module-loaders
下面就是按照配置文件中的东西开始安装node模块
以windows为例：
在dos中进入项目根目录
使用 npm install --save-dev 分别安装如下模块：
webpack: webpack模块
react:react模块
react-dom：react操作dom模块，最新的react必须要用
jsx-loader: 重要模块，用于解析react组件文件
--------------------------------------------------------------------
为了方便研发需要安装webpack-dev-server和react-hot-loader这两个模块用于搭建本地服务器及支持react的热启动 （不嫌麻烦这个可以选择性添加，本文的配置文件默认你嫌麻烦）
其余的模块及loader就看你的需求，因为本例为快速搭建，仅仅引入jsx-loader，其余还有 json-loader style-loader url-loader等这些略去不表，方式和jsx-loader一样，在webpack配置文件中的module的loader数组中添加。
这些都安装好了，配置文件也写成了，那么以以下代码为例子，看看webpack如何运作一个项目：
首先准备一个react组件：
我们在comments文件夹里面建立一个 hello.js 也就是hello react组件
1 var React=require("react"); 2 var Hello=React.createClass({ 3 render:function(){ 4 return( 5 <div> 6 <h1>what</h1> 7 <div>my</div> 8 </div> 9 ) 10 } 11 }); 12 module.exports=Hello;
这里大家需要注意，return中的各个标签一定需要用一个标签包裹所有的字符，否则react报错
然后是enter.js
1 var ReactDOM=require("react-dom"); 2 var React=require("react"); 3 var Hello=require("./comments/hello"); 4 ReactDOM.render(<Hello></Hello>,document.getElementById(‘root-div‘));
之后是index.html
1 <html> 2 <head> 3 <title>react test</title> 4 </head> 5 <body> 6 <div id="root-div"></div> 7 <script src="./js/bundle.js"></script> 8 </body> 9 </html>
这里注意script标签一定要在整个dom结构之后
准备好这些文件之后，就可以运行webpack了：
还是在之前的dos对话框，输入 webpack就可以运行默认的webpack.config.js文件
运行完之后，再运行server.js
这样localhost:3000就启动了
如果在local中的console中报错，请根据报错内容按该网站类型查找原因：
https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md
之后你改动hello组件就会在localhost中即时改变了
原文：http://www.cnblogs.com/JhoneLee/p/4959871.html
