首先安装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 整合都整合在了一个大文件中
***/
{代码结构看截图}