react学习笔记一 Webpack+Babel+React实现一个demo

最近今天一直听同学说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//发布到服务器

react学习笔记一 Webpack+Babel+React实现一个demo

相关文章