使用NPM配置React环境及Webpack热加载

（需要本机具有NodeJS环境）

1.创建项目文件夹

2.初始化项目

打开命令行，定位到所创建的目录下，执行 "npm init" 命令后根据提示输入，如下图：

3.安装依赖

在命令行执行入下命令：

npm install -g --save react react-dom babelify webpack webpack-dev-server
npm install -g --save-dev babel-cli babel-preset-react babel-preset-es2015

PS: 参数g表示全局安装 参数save表示安装到项目依赖包中

4.配置webpack

在项目目录下创建文件 webpack.config.js,内容如下：

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname + '/src', // __dirname表示整个项目的目录
  entry: './js/index.js',  // 定义入口文件
  module: {
    loaders: [{
        test: /\.js$/, // 解析所有的js文件
        exclude: /(node_modules)/, // 跳过node_modules文件夹
        loader: 'babel-loader', // 使用babel-loader解释代码
        query: {
          presets: ['react', 'es2015'] // 加载相关包
        }
      }
    ]
  },
  output: {
    path: __dirname + '/src/',
    filename: 'bundle.js' // 生成打包后的js文件
  }
}

相关命令：webpack --watch  webpack-dev-server --hot --inline