最近今天一直听同学说webpack，react等js，都是现在比较火的js，所以就做了一个小简单的小demo
首先需要安装node.js,因为需要用的npm
生成package.json （package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息）
$npminit//按提示生成package.json
package.json
{
"name":"reactdemo","version":"1.0.0","description":"","main":"index.js","scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},"author":"","license":"ISC","devDependencies":{
"babel-core":"^6.7.7","babel-loader":"^6.2.4","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","css-loader":"^0.23.1","file-loader":"^0.8.5","jsx-loader":"^0.13.2","react":"^15.0.1","react-dom":"^15.0.1","style-loader":"^0.13.1","url-loader":"^0.5.7","webpack":"^1.13.0"
}
}
如指定依赖的其它包，这些依赖是指包发布后正常执行时所需要的，如果是开发中依赖的包，可以在devDependencies设置。
npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下
安装webpack
$npminstallwebpack-g//全局 $npminstallwebpack-server-dev--save-dev//进入到项目文件下
安装所需要的包
npminstallbabel-loaderbabel-corebabel-preset-es2015babel-preset-reacturl-loadercss-loaderstyle-order--save-dev
main.jsx
require("./css/style.css");//引入css文件
varReact=require("react");
varReactDOM=require("react-dom");
varHelloMessage=React.createClass({
render:function(){
return<div><figure>
<imgsrc='images/bg.jpg'/></figure><imgsrc='images/ewm.png'
className="ewm"/></div>
}
});
ReactDOM.render(<HelloMessage/>,document.getElementById('example')
);
index.html
<!DOCTYPEhtml> <html> <head> <Metacharset="UTF-8"> <title></title> <Metaname="viewport"content="width=640,target-densitydpi=device-dpi,user-scalable=no"> </head> <body> <divid="example"></div> </body> <scriptsrc="bundle.js"></script> </html>
webpack.config.js
module.exports={
entry:'./main.jsx',//入口文件
output:{
filename:'bundle.js'//输出文件
},module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},{
test:/\.js[x]?$/,exclude:/node_modules/,loader:'babel-loader?presets[]=es2015&presets[]=react',},{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
}
};
执行打包
webpack//直接打包 webpack-dev-server//发布到服务器
