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)