webpack之React开发环境配置

React组件在实际的开发过程当中会结合webpack使用。配置的过程大体以下：
首先咱们建立一个项目文件夹Hello，使用npm init命令生成package.json文件。而后咱们确认一下是否安装了webpack和webpack-dev-server。若是没有安装能够进行全局安装或者安装在本地。

一、配置babel

React组件在编写的过程当中，在render方法中推荐使用JSX语法，代码总体编写推荐采用ES6语法。这两种语法须要使用Babel进行转换。
使用过程当中需安装babel-core核心模块和babel-loader，正确转换要安装babel-preset-es2015和babel-preset-react
npm install babel-core babel-loader --save-dev
npm install babel-preset-es2015 babel-preset-react --save-dev

安装好包后，需在项目根目录下新建.babelrc，进行配置

二、配置webpack文件

babel解析的过程须要在webpack.config.js文件中配置babel-loader，截图以下：

三、代码编写及React依赖包安装

配置完毕后，咱们能够写一些代码进行测试。

3.1新建index.html

3.2新建一个index.js

编写React组件时，要安装react和react-dom，使用命令以下：
npm install react react-dom --save

组件代码以下：

3.3项目的总体目录结构

至此项目配置以及完成，总体结构以下：

四、小结

从以上配置过程来看，本身动手配置仍是挺麻烦的，社区有热心人提供了creat-react-app脚手架来减轻咱们的工做量。