Reactjs+webpack2+ES6环境配置

---

最近在学习Reactjs,从开始学到现在刚入门，最大的感触就是环境太TMD难配了,一下是我配置环境的过程

---

1. 建立项目文件(APP),并进行初始化
   mkdir APP
npm init

• 若无额外要求，一直火车即可

2.安装webpack,并将其加入项目依赖
npm install webpack --save-dev

3.配置webpack

• 在项目根目录下建立webpack.config.js文件,并编辑内容
  touch webpack.config.js

module.exports = {
    entry: "./entry.js", // 要打包的入口文件
    output: {               //打包后的文件
        path: __dirname + '/dist',   //表示使用绝对路径
        filename: "bundle.js" //输出文件名
    },
    module: {
        loaders: [            //用于加载一些静态文件夹（css样式，图片之类）
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                // exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

4.建立必要的的项目文件

• 建立entry.js作为入口文件
  touch entry.js
• 建立dist目录用于存放打包后输出的文件
  mkdir dist
• 建立index.html作为项目主页面
  touch index.html

• 建立public目录用于存放静态文件
• 建立.babelrc文件
  touch .babelrc

{
  "presets": [
    "es2015",
    "react"
  ]
}

5. 安装必要依赖
   npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
   6.写个例子

• entry.js

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

    render() {
        return 
Hello World
;
    }
}
render(, document.getElementById('app'));

• index.html不变
• 完成后首先在终端内运行webpack编译文件，然后再打开index.html