参考资料
https://segmentfault.com/a/1190000006178770
package.json 版本更新资料
http://blog.csdn.net/zhangteng22/article/details/76438776
注意
- 在每次npm run server 前一定要先打包文件 npm start
- 下列所述模块都必须通过package.json中安装，并在webpack.config.js中做相应配置。
Loaders
Loaders可以把React的中用到的JSX文件转换为JS文件。
Babel
一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
- 使用下一代的JavaScript代码（ES6，ES7...），即使这些标准目前并未被当前的浏览器完全的支持；
- 使用基于JavaScript进行了拓展的语言，比如React的JSX；
注意配置Babel的.babelrc文件应创建于根目录下
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同。
- css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能。
- style-loader将所有的计算后的样式加入页面中
二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
如果出现错误：Can't resolve 'babel-loader'
请参考 http://coding.imooc.com/learn/questiondetail/6295.html
服务器配置原理
- 1.实现创建服务器，通过本地端口运行index.html文件。
安装webpack-dev-server
- 2.实现npm 后自动打开浏览器
在package.json文件中配置
"server": "webpack-dev-server --open"
- 3.实现热加载(不是实时加载，实时加载即自动刷新，会看到明显的页面刷新效果，而热加载不会有刷新效果)
通过设置webpack.config中的devserver属性实现
(仅限于组件代码，package.json及webpack.config.js文件修改后仍需手动npm start重新打包)
Babel有一个叫做react-transform-hrm的插件，可以在不对组件模块进行额外的配置的前提下让HMR正常工作；
