(24/24) webpack小案例--自己動手用webpack構建一個React的開發環境
通過前面的學習，對webpack有了更深的認識，故此節我們就利用前面相關知識自己動手用webpack構建一個React的開發環境，就算是一個小案例吧。
注：此處使用的開發工具是Webstorm。
1.安裝webpack
1.1 新建資料夾
在安裝webpack之前，我們先建立一個資料夾,並利用開發工具webstorm開啟剛才新建的資料夾（或者新建專案，其專案目錄選擇剛才新建的資料夾），然後使用webstorm終端初始化webpack專案，命令如下：
npm init -y
-y:表示預設初始化所有選項。
初始化成功後可以在專案根目錄下看到package.json檔案。
1.2 安裝webpack
package.json檔案建立好以後，開始安裝webpack，同樣是在webstorm終端輸入安裝命令（可以使用npm安裝也可以使用cnpm安裝）：
npm install --save-dev [email protected]
--save-dev：安裝到該專案目錄中。
注意：此處為了相容，webpack使用3.8.1版本。
安裝好後，則會在package.json裡看到當前安裝的webapck版本號。
2.配置webpack.config.js
在專案根目錄建立webpack.config.js檔案，這個檔案是進行webpack配置的，先建立基本的入口和出口檔案。
2.1 配置
var path =require('path'); module.exports = { //入口檔案 entry:'./app/index.js', //出口檔案 output:{ filename:'index.js', path:path.resolve(__dirname,'dist') } }
2.2 根據結構修改專案目錄
檔案配置好後，我們要根據檔案的結構改造我們的專案目錄，我們在根目錄下新建app和dist資料夾，然後進入app資料夾，新建一個index.js檔案。
3. 新建index.html檔案
在根目錄新建index.html檔案，並引入webpack設定中的出口檔案，程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack react案例</title> </head> <body> </body> <!--引入出口檔案--> <script src="./temp/index.js"></script> </html>
4. 增加打包命令並測試配置是否成功
4.1 增加命令
開啟package.json檔案，在scripts屬性中加入build命令。
"scripts": { "build": "webpack" },
4.2 測試配置
4.2.1 測試程式碼
操作為在入口檔案中寫入部分程式碼，並進行打包測試：
app/index.js檔案：
function component(){ var element = document.createElement('div'); element.innerHTML = ('Hello webpack react'); return element; } document.body.appendChild(component());
4.2.2 打包操作
在終端中輸入npm run build進行打包，如果沒有出現錯誤，手動在瀏覽器中開啟index.html,出現以下效果說明配置成功。
5. 開發伺服器配置
到該步我們還缺少一個實時更新的服務，我們開始配置：
5.1 外掛安裝
此處為了相容使用指定安裝方式。安裝的版本為2.9.7。
npm install --save-dev [email protected]
5.2 配置webpack.config.js檔案
devServer:{ contentBase:'./', host:'localhost', compress:true,//啟動壓縮 port:1818 }
5.3 新增命令
配置好後再packeage.json裡增加一個scripts命令，我們起名叫server。
"scripts": { "build": "webpack", "server": "webpack-dev-server --open" },
–open表示是直接開啟瀏覽器。
5.4 啟動服務
在終端執行npm run server 命令啟動服務。
npm run server
瀏覽器自動開啟，效果與前面手動結果一致。
6.配置自動重新整理瀏覽器
到此我們修改程式碼時，瀏覽器不能自動重新整理，無法實時呈現我們編寫的程式碼結果，只能重複新打包才能生效。
解決方法為：使公共路徑指向記憶體。temp是系統的臨時檔案，存放記憶體重新整理值。
6.1 配置出口檔案
在出口檔案配置中加一個publicPath:’temp/’ 。
//出口檔案 output:{ filename:'index.js', path:path.resolve(__dirname,'dist'), publicPath:'temp/' }
6.2 修改index.html中引入的js檔案
<script src="./temp/index.js"></script>
6.3 重新啟動服務配置成功
關閉之前的服務，然後使用npm run server 重新啟動服務。
npm run server
6.4 測試自動重新整理瀏覽器是否成功
改寫入口檔案中內容，然後儲存，可以看到瀏覽器自動重新整理，渲染了最新的值，說明自動重新整理配置成功。
7. Babel安裝配置
在webpack中配置Babel需要先加入babel-loader，我們使用npm來進行安裝，我們還需要支援es2015和React，所以要安裝如下四個包：
此處為了相容問題我使用指定版本的安裝方式，如下：
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
當然你也可以使用下列方式安裝最新的，出現版本問題在對應去調整即可（不過有些費時費力而已，呵呵）
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
這裡四個包的安裝，這四個包是不能省略。安裝後你會在package.json裡看到這些包的版本如下：
"babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.7"
8. .babelrc配置
安裝完成後，我們需要對我們的babel進行一些相關配置,使其對es6、react等進行支援。
8.1 新建 .babelrc
在專案根目錄新建.babelrc檔案，並把配置寫到檔案裡。
.babelrc:
{ "presets":["react","es2015"] }
9. 配置module
.babelrc配置完成後，到webpack.config.js裡配置module，也就是配置我們常說的loader。
module:{ loaders:[ { test:/\.(jsx|js)$/,//匹配掉js或者jsx的正則 exclude:/node_modules/,//排除不操作的檔案 loaders:"babel-loader",//使用loader進行操作 } ] }
10. 編寫React
webpack通過上邊的步驟，基本已經配置完成了，這裡我們寫一個React檔案來進行測試一下。
10.1 安裝React相關包
安裝React和React-dom：
npm install --save react react-dom
10.2 改寫入口檔案
安裝完成後，我們改寫app/index.js檔案，把原來原生的JavaScript程式碼改成React程式碼。
app/index.js:
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello react</div>, document.getElementById("app") );
10.3 新增掛載點
在index.html中新增一個div層，設定id="app"作為react的掛載點。
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack react案例</title> </head> <body>
<!--掛載點--> <div id="app"></div>
</body> <!--引入出口檔案--> <script src="./temp/index.js"></script> </html>
11. 測試相關配置是否成功
當上述都配置完成後，使用npm run server 重新啟動服務，若是出現失敗，建議先把node_modules刪除了，然後在使用 npm install 進行安裝。
npm run server
如果在瀏覽器中看到了Hello react 這段文字，說明我們的配置是成功的。如下：
上述只是簡單的配置了一些內容，還很不成熟，支援的較少，實際在現實開發中已經有很多做好的腳手架供我們使用，我們不必去造輪子。
若是在上述配置中出現什麼問題，歡迎留言我們共同探討。。。