reactjs学习一（环境搭配react+es6+webpack热部署）
reactjs今年在前端圈里很火，用了三四个月，感觉确实很适合前端开发人员使用，值得深入一下，所以这里记录一下我简单的学习过程，首先是react的环境，由于现在react的新版本已经很稳定了，所以推荐使用es6+webpack来搭建开发环境。
首先，安装nodejs，略过，安装gitbrach，略过，直接搜索到相对应软件的官网，下载最新正式版本的软件，然后就下一步下一步完成安装就可以了，很简单的过程，但是不容忽略，如有问题，可以问我。
然后就是安装webpack和一些依赖组件，便于打包，比如，在你的项目文件夹里执行
| 1 | npm init |
然后就是一直回车，新建一个 package.json 的文件，然后添加如下的代码进去：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | "devDependencies" : { "babel-core" : "^6.7.7" , "babel-loader" : "^6.2.4" , "babel-preset-es2015" : "^6.6.0" , "babel-preset-react" : "^6.5.0" , "component-ajax" : "forbeslindesay/ajax" , "css-loader" : "^0.23.1" , "extract-text-webpack-plugin" : "^1.0.1" , "file-loader" : "^0.8.5" , "html-loader" : "^0.4.3" , "html-webpack-plugin" : "^2.16.1" , "moment" : "^2.13.0" , "node-sass" : "^3.5.3" , "react" : "^15.0.1" , "react-cookie" : "^0.4.6" , "react-dom" : "^15.0.1" , "react-helmet" : "^3.1.0" , "react-router" : "^2.4.0" , "sass-loader" : "^3.2.0" , "style-loader" : "^0.13.1" , "url-loader" : "^0.5.7" , "webpack" : "^1.13.0" , "webpack-dev-server" : "^1.14.1" } |
有些不是必须的，但建议都加上，以防后面还是会用到，再执行 npm install 安装这些依赖到本地，控制台测试下webpack是否安装成功：
| 1 | webpack -v |
如果报错了，可以尝试把webpack安装成全局的
| 1 | npm install -g webpack |
接下来，就是新建一个 webpack.config.js 的配置文件了，然后粘贴如下的代码进去.
View Code 代码有点多，但我们可以尝试的去理解他，因为webpack跟gruntjs有点类似，就是全是配置项，所以更多的需要去参考来配置。反正我是看晕了，所以我不建议初学者一直纠结于这个配置，还是来看我的配置吧，这里使用到了 process.env.NODE_ENV 这个环境变量来作为webpack的参数，方便我打出不同项目的包，再根据这个特点和 modulesDirectories 的作用，我可以打包的时候指定不同的js文件夹，这有什么用呢，就是说，我的参数（也就是NODE_ENV ）是production的时候，js默认的目录是
["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];
就是我在代码里import的时候，可以省略掉../../../这种 ，他会先去这几个文件里去查找有没有这个js。其实跟我的这个项目有关，你正常的项目可以忽略掉这一块的配置。
然后我把公用的几个文件打到了一个 base.js 里，
vendor: ["react", "react-dom", 'whatwg-fetch', 'react-router'] new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin 这里还用到了一个 template.html ,这个是基于这个html模板新建一个打包后的html引用，为什么不直接用index.html这个呢，主要是要把Index.html这个留热部署，template会加入js的hash文件引用，防止缓存导致的一些问题。
到这里webpack就算配置完成了，可以使用如下方法：
webpack -w //监听打包webpack -p //压缩打包
既然有了监听打包，为什么还要热部署呢，因为监听打包是会生成文件的，而且速度上也会有影响，接着，我们创建server.js文件
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");}var compiler = webpack(config);var server = new WebpackDevServer(compiler, {}); server.listen(8080); 代码比较少，就是它会创建一个端口号为8080的http服务，而且是自动刷新页面，自带reload装逼技能。打开 查看是否能够打开！如果没有打开可能是因为你还没有启动服务。
然后在index.html里加入如下代码
这样基本上一个环境就算搭完了，然后使用 npm start 启动热部署。修改App.jsx里的代码，浏览器就会自动刷新为最新结果。而且本地没有生成打包文件，很方便。