React webpack的写法

1、目前我们写的react组件的特点

1、所有组件都写在一个js文件里面不好维护，写多个js去引入也无法识别
2、通过browser.js讲jsx转换成js 性能慢

2、如何解决 借助前段构建工具webpack

  1、webpack是facebook为react量身打造的构建工具

  2、主要作用是实现模块化，代码整合，代码分割的作用

  3、使用webpack整合以后  也不需要使用browser进行将jsx转成js了

3、也就是使用webpack实现模块化—什么是模块化

1、模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似

2、react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口

3、在其他组件当中可以调用这些对外提供成接口的组件

如何使用webpack

1、全局安装 webpack

2、项目中安装依赖 webpack –D

3、安装webpack支持react的核心工具jsx-loader

4、安装react  react-dom 依赖(2017.9.27最新版本  弃用createClass)

5、安装npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

5、配置文件  打包输出
 loaders: [{test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: { presets: ['es2015', 'react']}}]