react是目前非常熱門的前端框架，提倡組件化開發。所謂的組件，簡單理解，就是一個獨立的頁面部件（包括頁面模版，樣式，邏輯等），它是一個獨立的整體。
webpack，是一個模塊打包工具，其主要功能，就是將瀏覽器端無法識別的代碼，通過各種loader和plugin，生成瀏覽器可用的代碼。比如，我們可以在瀏覽器端使用ES2015和JSX編碼的文件。
在使用react進行組件化開發之前，我們首先需要配置一個我們可以使用的開發環境，下面，我們將一步步講解，配置一個基本的開發環境。其中安裝的文件都是當前最新版本。在開始之前，請先保證你已經安裝了node。
1. 創建測試項目
為了可以讓我們每一步都可以進行測試，了解其中都做了什么，我們提前編寫我們的測試項目。大家可以先不用深入理解。（在我們以后的項目中，我們可能會用JSX文件和sass文件，在這里我們盡量真實且簡單的還原項目）。
1）首先我們創建一個項目文件夾，名為test
2）在文件中添加index.jsx，hello.jsx, index.scss, index.html
1 // index.scss 2 3 $color: #f40; 4 5 h1 { 6 color: $color; 7 }
1 // hello.jsx 2 module.exports = 'Hello React';
1 // index.jsx 2 // 引入react和react-dom模塊 3 // 使用ES2015模塊導入語法 4 import React from 'react'; 5 import ReactDOM from 'react-dom'; 6 7 // 引入自定義的hello.jsx 8 var text = require('./hello.jsx'); 9 10 // 引入我們編寫的sass文件 11 require('./index.scss'); 12 13 // 編寫一個簡單的組件 14 class App extends React.Component { 15 render(){ 16 return ( 17 <h1>{text}</h1> 18 ); 19 } 20 }; 21 22 // 創建一個組件實例，將組件掛載到文檔結構中 23 ReactDOM.render(<App />, document.body);
1 // index.html 2 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>My test</title> 8 </head> 9 <body> 10 <script type="text/javascript" src="bundle.js"></script> // bundle.js是由webpack自動生成的文件，文件名通過配置webpack設置 11 </body> 12 </html>
以上是我們項目的基本結構。
為了方便項目文件的管理，我們使用npm，在項目根目錄下使用npm init --yes，在根目錄下生成一個package.json，管理項目依賴等。
2. 安裝webpack
1）以命令行工具的形式使用webpack時，在全局安裝webpack。
npm install webpack -g
2) 編寫自己的構建腳本，或由項目指定需要依賴的webpack，本地安裝，webpack只是構建工具的角色，應該安裝在dev－dependencies中，但是，目前我們只使用命令行工具，這種安裝方式，只是作為介紹，在之后的搭建過程中並不會用到。
npm install webpack --save-dev
3. 配置基本的webpack
在項目根目錄下添加webpack.config.js配置文件，它是一個Node.js模塊格式的配置文件，直接導出一個配置對象。
1 // 用於拼接路徑 2 var path = require('path'); 3 4 module.exports = { 5 // 指定項目入口 6 entry: path.resolve(__dirname, 'index.jsx'), 7 8 // 對輸出結果描述 9 output: { 10 // 輸出路徑 11 path: path.resolve(__dirname, 'build'), 12 // 輸出的文件名 13 filename: 'bundle.js' 14 }, 15 16 // 配置模塊使用的加載器 17 module: { 18 loaders: [ 19 { 20 // 假設我們擁有一個編譯sass加載器 21 // 匹配字符串 22 test:/\.scss$/, 23 // 使用的加載器，不可以省略加載器的后綴-loader 24 loaders:['style-loader', 'css-loader', 'sass-loader'] 25 } 26 } 27 }
4. babel，sass加載器
可以從我們的項目結構中發現，我們使用了.jsx文件和.scss文件，瀏覽器中無法正常使用這類文件，我們通過添加加載器，將進行解析，以便瀏覽器使用。
1）babel加載器
npm install babel-core babel-loader --save-dev
2）配置.babelrc文件
在項目根目錄下創建一個.babelrc文件，存放一個對象，分別用presets字段存放規則，plugins字段存放插件，目前我們只用到ES2015和react規則
npm install babel-preset-es2015 babel-preset-react --save-dev // 添加規則
{ "presets": ["react", "es2015"] }
3) sass加載器
npm install node-sass style-loader css-loader sass-loader --save-dev
4) 配置webpack.config.js配置文件
1 // 模塊部分更新為下面代碼 2 3 module: { 4 loaders: [ 5 { 6 test:/\.scss$/, 7 loaders:['style-loader', 'css-loader', 'sass-loader'] 8 }, 9 { 10 test:/\.jsx?$/, 11 loaders: ['babel-loader'] 12 }] 13 },
此時即可正常加載.scss和.jsx文件。
5. 安裝react和react-dom
npm install react react-dom --save
到此，我們在項目根目錄下執行webpack已經已經在根目錄下生成一個bundle.js文件，我們可以正常在index.html文件文件引用，並且在瀏覽器中查看。
之后的內容，我們將會介紹webpack的插件的用法，以及webpack-dev-server配置方法。
1. html-webpack-plugin
我們可以發現我們index.html文件中，只是一個空的HTML結構和引入了生成的bundle.js文件，因此我們可以利用html-webpack-plugin插件來自動生成index.js文件。
1) 下載插件
npm install html-webpack-plugin --save-dev
2）配置webpack.config.js文件
首先在文件頭部引入插件，然后在添加一個plugins字段，並在其中一個插件對象實例。
1 var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 3 module.exports ={ 4 plugins: [ 5 new HtmlWebpackPlugin({ 6 title: 'My test' 7 }) 8 ] 9 }
此時我們刪除index.html和bundle.js，webpack自動在build路徑下創建這兩個文件。
2. webpack-dev-server
我們可以使用webpack --wacth來監控代碼，只要代碼一修改，自動更新bundle.js，但是瀏覽器的網頁還需要手動刷新。在開發工程中，非常的不方便。webpack-dev-server為我們解決了這個問題，它是一個小型服務器，在開發過程中可以實時刷新網頁。
下面我們來安裝配置webpack-dev-server。
1）全局安裝webpack-dev-server
npm install webpack-dev-server -g
2）配置webpack-dev-server
1 // 添加devServer字段,其中字段變動比較大，配置時需要根據文檔進行配置 2 devServer: { 3 historyApiFallback: true, 4 inline: true, 5 contentBase:'./build/', 6 port:'8086' // 我電腦上默認的8080端口無法訪問，所以設置port為8086 7 },
3）設置運行快捷方式
在package.json中的scripts字段中添加下面一行，在命令行中輸入npm run dev，直接啟動webpack-dev-server，可以在指定端口進行訪問。
1 "scripts": { 2 "dev": "webpack-dev-server" 3 },
3. 組件熱加載（HMR）
我們在上述描述下，搭建的環境，每修改一次代碼，頁面都會整體刷新一次，我們更希望，頁面局部刷新修改的組件。因此就有了組件熱加載這個概念。我們可以直接安裝babel-preset-react-hmre實現HMR。
npm install babel-preset-react-hmre --save-dev
.babelrc中的配置改為：
1 { 2 "presets": ["react", "es2015"], 3 "env": { 4 "development": { 5 "presets": ["react-hmre"] 6 } 7 } 8 }
並將啟動命令改為：
"scripts": { "dev": "webpack-dev-server --hot" },
此時我們在命令行輸入npm run dev，即可。
完成項目github地址：https://github.com/DiligentYe/react-webpack-env