安装，配置webpack.
1.下载node.js
2.在需要用到webpack的项目下打开命令窗口运行npm init生成package.js
3.安装webpack，使用npm install webpack --save-dev（在本目录中安装）
4.在本项目的目录下新建一个webpack.config .js(默认访问的是这个文件，如需更改需要配置，不过我暂时还不知道怎么配的)
5.在webpack.config .js中配置
1 var webpack = require('webpack');
2 module.exports = {
3 //页面入口文件配置
4 entry:'./js/index.jsx',
5 //入口文件输出配置
6 output:{
7 path:__dirname,//这个要放在一个绝对路径下
8 filename:'dite.js',
9 },
10 module:{
11 loaders:[
12 {test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'},//这里需要下载style-loader css-loader sass-loader
13 {test :/\.jsx$/,loader:"babel-loader",query:{
14 presets:['react','es2015']
15 }}//babel可以将ES6转换为ES5 需要下载 babel-loader babel-presets-es2015 babel-presets-react
16 ]
17 },
18 // module:{
19 // //加载器配置
20 // loaders:[
21 // {test:/\.css$/,loader:'style-loader!css-loader'},
22 // {test:/\.js$/,loader:'jsx-loader?sourceMap'},
23 // {test:/\.scss$/,loader:'style!css!sass!sourceMap'},
24 // {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}//limit=8192将小于8kb的图片转换为base64
25 // ]
26 // },
27 resolve:{
28 extensions:['.js','.json','.scss']
29 },
30 plugins:[
31 //去除代码块内的告警语句
32 new webpack.optimize.UglifyJsPlugin({
33 compress:{
34 warnings:false
35 }
36 }),
37 //优先考虑使用最多的模块，并为它们分配最小的ID
38 //new webpack.optimize.OccurenceOrderPlugin()
39 ]
40 }6.需要新建入口引入的文件'./js/index.jsx',jsx的类容(里面有一些我学习react的代码);
1 require('../css/index.scss');
2 import React from 'react';//react的核心库
3 import ReactDOM from 'react-dom';//提供Dom的相关功能
4 import render from 'react';
5
6 var b = require('./main');
7 console.log(b.add(1,2)+"---获得b中的数据!!!");
8
9 console.log("aaa"+React);
10 var i = 1;
11 var myStyle = {
12
13 };
14 var NameStyle = {
15 fontSize:14,
16 color:'blue'
17 };
18 var LinkStyle = {
19 fontSize:18,
20 color:'orange'
21 }
22 var arr = [
23 '<h1>123</h1>',
24 '<h1>234</h1>'
25 ];
26 var HelloWorld = React.createClass({
27
28 render:function(){
29 return(
30 <div>
31 <Name name = {this.props.name}/>
32 <Link site = {this.props.site}/>
33 </div>
34 );
35 }
36 });
37 var Name = React.createClass({
38 render:function(){
39 return (<h1 style={NameStyle}>{this.props.name}</h1>);
40 }
41 });
42 var Link = React.createClass({
43 render:function(){
44 return (
45 <div>
46 <p>{this.props.site}</p>
47 <a href={this.props.site}>{this.props.site}</a>
48 </div>
49 );
50 }
51 });
52 var LikeButton = React.createClass({
53 getInitialState:function(){
54 return {liked:false};
55 },
56 handleClick:function(event){
57 this.setState({liked:!this.state.liked});
58 },
59 render:function(){
60 var text =this.state.liked?'喜欢':'不喜欢';
61 return(
62 <p onClick={this.handleClick}>
63 你{text}我,点我切换状态;
64 </p>
65 );
66 }
67 })
68 ReactDOM.render(
69 <h1 style = {myStyle}>
70 {/*first info*/}
71 Hello,world!
72 {1+2}{i==1?'true':'false'}
73 {arr}
74 <HelloWorld name = 'yeam' site="http://www.runoob.com"/>
75 <LikeButton/>
76 </h1>,
77 document.getElementById('setInfo')
78 )7.html页面中的信息
1 <!doctype html> 2 <html > 3 <head> 4 <meta charset="utf-8"> 5 <title>New React App</title> 6 <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css"> 7 </head> 8 <body> 9 <div > 10 </div> 11 <script src="dite.js"></script> 12 </body> 13 </html>
8.package.js中的相应信息
1 {
2 "name": "hello",
3 "version": "1.0.0",
4 "main": "index.js",
5 "scripts": {
6 "test": "echo \"Error: no test specified\" && exit 1",
7 "start": "webpack-dev-server --port 3000"
8 },
9 "author": "",
10 "license": "ISC",
11 "devDependencies": {
12 "babel-loader": "^6.3.2",
13 "babel-preset-es2015": "^6.22.0",
14 "babel-preset-react": "^6.23.0",
15 "browser-sync": "^2.18.7",
16 "css-loader": "^0.26.2",
17 "gulp": "^3.9.1",
18 "gulp-autoprefixer": "^3.1.1",
19 "gulp-clean-css": "^3.0.2",
20 "gulp-concat": "^2.6.1",
21 "gulp-minify-css": "^1.2.4",
22 "gulp-sass": "^3.1.0",
23 "gulp-uglify": "^2.0.1",
24 "react": "^15.4.2",
25 "react-dom": "^15.4.2",
26 "runoob-react-test": "file:React",
27 "sass-loader": "^6.0.2",
28 "style-loader": "^0.13.2",
29 "webpack": "^2.2.1",
30 "webpack-dev-server": "^2.4.1"
31 },
32 "dependencies": {
33 "react": "^15.4.2",
34 "react-dom": "^15.4.2"
35 },
36 "description": ""
37 }9.发布服务需要安装 npm install webpack-config-server --save-dev
10.在浏览器中运行 localhost:3000(端口号3000是在package中修改的，如果没有设置默认是8080)
