安裝，配置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 lang="en">
 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 id="setInfo">
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)