React 学习（一）环境的搭建

环境搭建

1. npm 在项目目录下安装 react， react-dom

$ npm install react --save
$ npm install react-dom --save

1. 安装babel 来对react，es6 解析转码

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

1. 安装webpack
   
   • 全局安装 webpack， webpack-dev-server

$npm install webpack -g
$npm install webpack-dev-server -g

• 项目文件中安装

$npm install webpack --save
$npm install webpack-dev-server --save

1. webpack配置文件
   在根目录下新建一个webpack.config.js 的配置文件来 通过 cmd 执行完成打包；

   例如：

ar webpack=require('webpack');
var path=require('path');
 module.exports={
     context:__dirname+'/src', 
     entry:'./js/index.js',  //入口文件
     output:{
        path:__dirname+'/src/js/', //输出地址
        filename:'bundle.js'  //输出文件名
     },
     module:{
        loaders:[{
            test:/\.js?$/, //正则匹配文件后缀
            exclude:/(node_modules)/, //不进行解析的文件夹
            loader:"babel-loader", // 指定loader
            query:{
                presets:['react','es2015'] //指定loader 解析的类型
            }
        }]
     },

 }

命令
webpack 来打包文件；
webpack –watch 监听代码更新 自动打包
webpack-dev-server 搭建虚拟服务器来访问；