react学习笔记一 Webpack+Babel+React实现一个demo
发布时间：2020-12-15 03:34:33 所属栏目：百科 来源：网络整理
导读：最近今天一直听同学说webpack，react等js，都是现在比较火的js，所以就做了一个小简单的小demo 首先需要安装node.js,因为需要用的npm 生成package.json （package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息 ） $npminit//
|
最近今天一直听同学说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//发布到服务器 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |