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腳手架來減輕咱們的工做量。