webpack和react實戰(zhàn)
在我原來的文章webpack學習之旅中，我介紹了下關于webpack的用法结榄，我想大家應該通過這篇文章大概知道webpack是怎么使用的了。那么這篇文章將為通過一個小的例子帶領大家如何在項目中使用webpack。
開始之前
在開始之前，大家必須知道webpack的使用方法,以及react框架的使用方法,在下文中,不會花費較多的篇幅去進行講解它們的細致的用法醒第。沒有接觸過它們的同學，可以看這兩篇文章webpack學習之旅和React_Learn,也可以參考阮一峰老師的教程进鸠。
開啟實戰(zhàn)之旅吧～
首先我先說下我們要做啥稠曼，我們這次要做一個簡單版的留言板功能。需要用到的技術有 webpack和react客年。
- 第一步霞幅，創(chuàng)建一個這樣的目錄結構
其中components文件夾放的是react的組件，其他文件夾顧名思義 我想大家肯定知道是用來干啥的了量瓜。
-
第二步,安裝一些我們需要用到的包依賴司恳，在該項目中我們要用到
jsx loader還有css loader還有react和react-dom,除了這些我們還要用到其他的依賴，下文會提到.npm install jsx-loader css-loader style-loader --save-dev npm install react react-dom --save -
第三步绍傲，分析留言板的組成
我們都知道
react最重要的是思想是組件化,所以我們現(xiàn)在要做的是把一個留言板拆成一個個的組件抵赢。一個留言板,至少要分成兩小塊:1.評論顯示區(qū),2.評論區(qū)。將這兩個小的組件組裝起來稱為一個大組件,一個留言板便做好了唧取。那么接下來，我們來構建這些組件划提。 -
第四步枫弟，構成組件
大家先在components文件里創(chuàng)建以下文件messageBoard.jsmessageFormmessageList三個文件 ，分別代表 留言板鹏往，評論區(qū)淡诗，評論顯示區(qū)骇塘。-
評論顯示區(qū)組件代碼
// messageList.js var React = require('react'); var MessageList = React.createClass({ render: function() { var messages = this.props.data.map(function(message, index) { return ( <li key={index}> {message.name} said: <p>{message.message}</p> </li> ) }); return ( <div className="message"> <ol id="messageList"> {messages} </ol> </div> ) } }) module.exports = MessageList; -
評論區(qū)組件代碼
//messageForm.js var React = require('react'); var MessageForm = React.createClass({ getInitialState: function() { return { name: '', message: '' }; }, handleNameChange: function(e) { this.setState({ name: e.target.value }) }, handleMessageChange: function(e) { this.setState({ message: e.target.value }) }, handleSubmit: function(e) { e.preventDefault(); var name = this.state.name.trim(); var message = this.state.message.trim(); if (!name || !message) { return; } this.props.onMessageSubmit({ name: name, message: message }); this.setState({ name: '', message: '' }); }, componentDidMount: function() { }, render: function() { return ( <div className="row"> <form className="messageForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" value={this.state.name} onChange={this.handleNameChange} id="textName" className="form-control"/> <input type="text" placeholder="Say something..." value={this.state.message} onChange={this.handleMessageChange} id="textMessage" className="form-control"/> <input type="submit" className="btn btn-default" value="Leave a message"/> </form> </div> ) } }); module.exports = MessageForm; -
留言板組件
因為留言板組件就是由上面的兩個小組件所構成的，因為我們沒有搭建服務器路由系統(tǒng),所以我在代碼中偽造了些ajax數(shù)據(jù)請求,在代碼中會通過注釋解釋var React = require('react'); var MessageList = require('../components/messageList.js'); var MessageForm = require('../components/messageForm.js'); var data = [{ name: '小華', message: '你好' }]; //模擬在數(shù)據(jù)庫中的留言 var MessageBoard = React.createClass({ getInitialState: function() { return { data: [] }; }, componentDidMount: function() { //模范一個ajax請求數(shù)據(jù)回客戶端的過程,在真實的應用場景中韩容，此處放ajax請求 setTimeout(function() { this.setState({ data: data }) }, 2000) }, handleMessageSubmit: function(message) { //模擬將數(shù)據(jù)保存到數(shù)據(jù)庫的請求 data.push(message); //模擬重新從數(shù)據(jù)庫拉取數(shù)據(jù)的過程,改變state的值 this.setState({ data: data }); }, render: function() { return ( <div className="messageBoard"> <h3>{this.props.title}</h3> <MessageList data={this.state.data} /> <MessageForm onMessageSubmit={this.handleMessageSubmit}/> </div> ) } }) module.exports = MessageBoard;
-
-
第五步款违，寫
webpack的入口文件和html文件
在html文件夾中創(chuàng)建一個index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack with react</title> </head> <body> <div id="container"></div> <!-- webpack執(zhí)行后的輸出文件 --> <script src="../js/dist/bundle.js"></script> </body> </html>在
js文件夾中創(chuàng)建一個entry.jsvar React = require('react'); var ReactDOM = require('react-dom'); var MessageBoard = require('../components/MessageBoard.js'); ReactDOM.render(<MessageBoard title="留言板"/>, document.getElementById('container') ) -
第六步, 寫
webpack配置文件//webpack.config.js var path = require('path'); module.exports = { entry: './js/entry.js', output: { path: path.join(__dirname, 'js/dist'), filename: 'bundle.js' }, module: { loaders: [{ test: /\.js|jsx$/, loader: 'jsx?harmony' }] } } -
第七步，運行
webpack在終端輸入
webpack,會產(chǎn)生：
這就意味著我們成功了群凶，接下來插爹，用瀏覽器打開index.html
會是這樣的效果，但是看到一排的input標簽元素 是不是很難受请梢？那接下來我們簡單的調解下css樣式吧赠尾。
-
第八步，編寫
css重新利用webpack打包在
css文件夾下毅弧，創(chuàng)建一個style.css文件//style.css input{ display: block; margin: 10px; }在
webpack.config.js中增加css加載器//webpack.config.js ... module: { loaders: [{ test: /\.js|jsx$/, loader: 'jsx?harmony' }, { test: /\.css$/, loader: 'style-loader!css-loader' }] }在
entry.js中增加require('../css/style.css');重新在終端中輸入
webpack
瀏覽器打開index.html
本來到這里的時候我們就已經(jīng)結束了气嫁，但是大家有沒有想過，當你每次改變了css或 js文件都要重新webpack够坐，十分的麻煩寸宵，而webpack有個最強大的功能就是熱替換，也就是實時更新頁面,所以接下來我們就來試試這個功能吧元咙！
-
第九步 實現(xiàn)熱替換(HMR)功能
為了實現(xiàn)熱替換功能梯影，我們首先需要搭建一個服務器才行，在
webpack里面有一個開發(fā)工具就是可以自動開啟一個服務器蛾坯，所以首先我們先安裝依賴npm install webpack-dev-server --save-dev然后改變
webpack.config.js//webpack.config.js ... entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080/html', './js/entry.js' ] ...然后我們就可以開始使用
webpack開啟一個服務器了光酣，為了開啟這個服務，你必須在終端輸入很長一段shellwebpack-dev-server --devtool eval --progress --colors --hot --content-base大概講下它們代表的含義
- webpack-dev-server - 在 localhost:8080 建立一個 Web 服務器
- --devtool eval - 為你的代碼創(chuàng)建源地址脉课。當有任何報錯的時候可以讓你更加精確地定位到文件和行號
- --progress - 顯示合并代碼進度
- --colors - Yay救军，命令行中顯示顏色！
- --content-base - 指向設置的輸出目錄,后面可以寫你想指向的輸出目錄 不寫默認為空目錄
為了偷懶倘零，我們在
package.json文件里面唱遭，增加一些內容"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base" }還要安裝
webpack的包依賴和react-hot 加載器npm install webpack --save npm install react-hot-loader --save-dev再改變下
webpack.config.js里面的設置//webpack.config.js module: { loaders: [{ test: /\.js|jsx$/, loader: 'react-hot!jsx-loader?harmony' }, { test: /\.css$/, loader: 'style-loader!css-loader' }] }這樣我們可以直接在終端輸入
npm run dev然后效果和開始直接輸入一大串shell一樣接下來，我們直接在瀏覽器下訪問
localhost:8080
再點擊html就可以看到我們的頁面了.
最后
看到這里呈驶，我想大家應該知道webpack和react如何匹配使用了拷泽，當然這只是一個引子，希望這篇博文對大家有所幫助,寫到這里不得不提的是gulp這個前端自動化工具十分的好用,而且gulp-webpack這個插件可以完美的運用在gulp管理的項目中～
附上博客地址 附上代碼地址
最后袖瞻，希望這篇博客對大家有所幫助（如果是司致，請盡情star哦），歡迎提出您的寶貴建議～
