react.js学习（1） webpack

师父要我基于ES6开发，但是目前的浏览器暂不完全支持所有新语法特性，所以我需要将ES6编译为ES5。这里选择的是webpack

1、安装webpack

 npm install webpack -g 
 npm install webpack --sava-dev

2、安装react、babel

npm install --sava react react-dom
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --sava-dev

3、webpack.config.js

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  module.exports = {
     //插件项
      plugins:[commonsPlugin],
     //页面入口文件配置
     entry: {
         index : './src/js/startup.js'
     },
    //入口文件输出配置
     output:{
         path:'./js',
         filename: '[name].bundle.js'
     },
     // externals: { //排除构建文件外
  // 'react': 'React'
  // },
     module: {
         //加载器配置
        loaders:[
         {
            test: /\.css$/,loader: 'style-loader!css-loader'
        },
         {
              test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
         },
         {
             test: /\.js$/, loader: 'babel-loader', query:{
                 presets:['es2015','react']
             }
         },
         {
             test: /\.jsx$/, loader: 'babel-loader!jsx-loader?harmony'
         }
         ]
     },
     resolve: { extensions: ['', '.js', '.jsx'] }
 }

4、entry.js

1 'use strict'; 
2 import React from 'react'; 
3 import ReactDOM from 'react-dom'; 
4 
5 class Demo extends React.Component { 
6     render(){ 
7         return (<div>hello react</div>) 
8     } 
9 }  
10 React.render(<Demo />,document.getElementById("aaa"));

之后每次在修改完代码之后，只要在node命令行中输入 webpack即可编译。