webpack+ES6+react搭建简单开发环境

一直想要搭一个简单的react开发环境，看了很多文章还是一头雾水，但最后还是搭了一个算是能正常工作的开发环境吧，记录一下，以防以后忘记。一些必备的安装就不说了，其实主要是package.json和webpack文件的配置。
必备的工具，node、npm、git就不多说了。

首先目录结构如下：
build
…
src
…
package.json
webpack.config.js
build是文件打包之后的文件和index.html文件，src是要打包编译的源文件， package.json、 webpack.config.js是两个配置文件。

1.package.json文件

{
  "name": "react_todo",
  "version": "1.0.0",
  "description": " react study",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.13.3",
    "react-dom": "^15.3.2",
    "sass": "",
    "react-router": "^2.0.0",
    "webpack-dev-server": "^1.16.2"
  },
  "devDependencies": {
    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.14.5",
    "file-loader": "^0.8.4",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^0.5.2",
    "sass-loader": "^1.0.2",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.9.11"
  }
}

具体每个字段作用可以自行搜索，然后运行npm install 引入依赖包，建议安装cnpm，速度快多了，然后就会多个node_modules文件。

2.然后加入index.html文件和入口文件main.js,并配置webpack.config.js文件

“`
var path = require(‘path’);

module.exports = {
entry:[
‘webpack/hot/dev-server’,
‘webpack-dev-server/client?http://localhost:8080‘,
‘./src/main.js’
],
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’,
},
module:{
loaders:[
{
test:/.jsx?$/, loader:”babel” }, { test:/.css$/,
loader:”style ! sass”
}
]
}
};
具体字段作用自行搜索，入口文件为’./src/main.js’，打包后到”./build/bundle.js”,现在文件目录为：
build
index.html
src
App
…
main.js
package.json
webpack.config.js
`
###运行npm run build 即webpack打包，然后build中会多一个bundle.js文件，在index中引入。再运行npm run dev,就开启了一个服务器，在浏览器中输入localhost：8080，则会出现结果，同时还能支持热加载，即文件改变后会自动编译，浏览器也会自动刷新。

经测试在本地是可以用的，不过这还只是简单的配置，运用于简单的开发练习，这部分知识也还要好好学习。