首先安装node环境，全局安装webpack(参照webpack中文网)；
cd 到目录文件夹下
npm init(生成packge.json)
install webpack --save-dev
npm install jsx-loader --save-dev
npm install react --save-dev
npm install react-dom --save-dev
entry.js
var React = require("react"); var ReactDOM = require("react-dom"); var Head = require("./a.js"); var Nav = require("./b.js"); var Foot = require("./c.js"); var Demo = React.createClass({ render:function(){ return( <div> <Head/> <Nav/> <Foot/> </div> ) } }); ReactDOM.render(<Demo/>,document.getElementById("out"));
a.js
var React = require("react"); var Head = React.createClass({ render:function(){ return( <div> 头部 </div> ) } }); module.exports = Head;
index.html内容
<body> <div id="out"></div> </body> <script src="js/output.js" type="text/javascript" charset="utf-8"></script>
webpack.config.js
module.exports={ entry:'./js/entry.js',/**入口文件**/ output:{/**输出目录**/ path:'./js',/**输出路径**/ filename:'output.js'/**输出文件名称**/ }, module:{ loaders:[ { test: /\.js$/, /**通过入口处理匹配js文件**/ loader: "jsx-loader", /**使用哪个加载器 css－loader,coffee-loader,babel-loader**/ } ] } } /**** 1.通过入口 寻找入口里面调用的组件 文件 自动处理有依赖 2.代码整合 之所以实现a.js调用b.JS 整合都整合在了一个大文件中 ***/
{代码结构看截图}
