【目前弃用webstorm，内存太小，跑不起来重量级IDE,改用轻量级vscode，用法一致 】

1. 环境配置：

1. 需要配置webstorm IDE的默认设置：javascript language version: JSX harmony
   配置git 测试工具一类的
2. 创建一个项目，也可以从git checkout下来。
3. 在项目git ，给项目安装一些包。
   输入 cnpm init （配置最初的package.json配置文件）

安装 webpack babel react

cnpm install webpack --save-dev

cnpm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
终端输入以下代码对react和react-dom进行安装
cnpm install react  react-dom --save-dev
Babel针对React的所有的预设插件
cnpm install babel-preset-react --save-dev

4. 给项目配置webpack的配置文件，配置出口入口和babel

我们创建入口文件夹和入口文件 和出口文件夹
然后，写一个config.js文件，指明入口出口

module.exports = {
  entry: "./app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['','.coffee','.js']
  }
}

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
    presets: ['es2015','react']
}

5. 开始创建一些react的组件 并开始引用
6. 运行webpack 打包 成一个bundle.js
7. html 引用这个打包结束的js
8. 运行调试