React+Webpack快速上手指南(小結(jié))
前言
這篇文章不是有關(guān)React和Webpack的教程,只是一篇能夠讓你快速上手使用目前這兩種熱門技術(shù)的前端指南,并假設(shè)你對(duì)兩者有一個(gè)基本的認(rèn)識(shí)。如果你想先行了解下React,可以放肆的移步至 React官方教程,如果你已經(jīng)使用了其他的模塊加載與資源打包技術(shù),不妨也來看看 Webpack 提供的思路。
webstorm+react+webpack
強(qiáng)烈推薦使用webstorm!。(當(dāng)然你完全可以使用諸如atom,Sublime之類的編輯器,但之所以選擇webstorm是因?yàn)樗J(rèn)支持對(duì)react JSX 的語法高亮以及可以手動(dòng)開啟Emmet對(duì)jsx的支持,棒棒噠~)
首先請(qǐng)這么組織你的項(xiàng)目結(jié)構(gòu):
--your project |--app |--components |--productBox.jsx |--main.js |--build |--index.html |--bundle.js(該文件是webpack打包后生成的)
用npm安裝react、webpack
默認(rèn)已經(jīng)安裝了nodejs,并輸入:npm init根據(jù)提示輸入內(nèi)容并創(chuàng)建package.json文件
然后依次輸入:
npm install react --save-dev
npm install webpack --save-dev
安裝最新版本的React與Webpack并將它們保存至package.json內(nèi)的開發(fā)依賴項(xiàng)目中。
創(chuàng)建webpack.config.js配置文件
新建一個(gè)名為webpack.config.js
的文件,它應(yīng)該長這個(gè)樣:
var path = require('path'); module.exports = { entry: path.resolve(__dirname, './app/main.js'), output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js', } };
其中entry指定了webpack的入口程序,好比c++和java中的main程序一樣,我們把最終要插入到頁面指定位置的react模板寫入main.js中:
app/main.js
var React = require('react'); var AppComponent = require('./components/productBox.js'); React.render(<AppComponent />, document.getElementById('content'));
以及引入的自定義react組件:
app/components/productBox.js
var React = require('react'); var ProductBox = React.createClass({ render: function () { return ( <div className="productBox"> Hello World! </div> ); } }); module.exports = ProductBox;
而output則指定了webpack打包成功之后文件名稱以及文件的存放位置。
依照之前指定的項(xiàng)目結(jié)構(gòu),我們可以在index.html中直接引入打包生成的bundle.js,像這樣:
build/index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html>
安裝并啟用webpack-dev-server
webpack-dev-server允許我們可以把本地項(xiàng)目跑在像nginx那樣的web服務(wù)器上,更重要的是我們可以在package.json文件內(nèi)定義scripts,同時(shí)修改webpack的配置文件來達(dá)到類似BrowserSync(即文件修改能被監(jiān)聽,并自動(dòng)刷新瀏覽器)的效果!
我們先打開package.json,并找到scripts代碼塊。在沒引入webpack-dev-server之前,我們運(yùn)行這個(gè)項(xiàng)目的姿勢(shì)是這樣的:
修改scripts為
"scripts": { "build": "webpack" }
并且執(zhí)行:
npm run build
項(xiàng)目就跑起來啦,但是每次修改程序我們都要手動(dòng)輸入npm run build
來跑項(xiàng)目,這無疑是一件非常蛋疼的事情。但有了webpack-dev-server光環(huán),我們的姿勢(shì)應(yīng)該是這樣的:
為scripts添加
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }
ps:dev里各屬性值的意思是:
- webpack-dev-server: 在 localhost:8080 建立一個(gè) Web 服務(wù)器
- --devtool eval:為你的代碼創(chuàng)建源地址。當(dāng)有任何報(bào)錯(cuò)的時(shí)候可以讓你更加精確地定位到文件和行號(hào)
- --progress: 顯示合并代碼進(jìn)度
- --colors: 在命令行中顯示顏色
- --content-base build:指向設(shè)置的輸出目錄
并且在index.html里加入:
build/index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React Test</title> </head> <body> <div id="content"></div> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="bundle.js"></script> </body> </html>
在webpack.config.js的入口處加入:
var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js', } };
以便在進(jìn)行改動(dòng)時(shí)瀏覽器可以自動(dòng)刷新。
最后執(zhí)行:
npm run dev
你只要在瀏覽器打開這個(gè)地址:http://localhost:8080,webpack-dev-server會(huì)為你準(zhǔn)備好一切,你只要敲一敲鍵盤,save一下,所見即所得。
Webpack Loader
講到這里,我們基本上就可以迅速搭建一個(gè)簡(jiǎn)單的web項(xiàng)目,但不得不提的是webpack loader。它是我個(gè)人認(rèn)為相比于其他模塊加載更牛X的地方,將它用于react的開發(fā),結(jié)合react與生俱來的優(yōu)越性能,兩者天衣無縫的配合簡(jiǎn)直就是黃金組合。
總的來說webpack loader可以實(shí)現(xiàn):
- 可以將React JSX語法轉(zhuǎn)為js語句
- React開發(fā)中支持ES6語法
- 支持通過import來直接引入css、less、sass甚至是圖片
- 支持css中引用的圖片大小在某一大小范圍之內(nèi)直接轉(zhuǎn)為BASE64格式
。。。。。等等等
為了能夠讓以上功能奏效,我們要先安裝對(duì)應(yīng)的:
babel-loader
npm install babel-loader --save-dev
css-loader
npm install css-loader --save-dev
less-loader
npm install less-loader --save-dev
style-loader
npm install style-loader --save-dev
url-loader
npm install url-loader --save-dev
而具體的實(shí)現(xiàn),我們只要在webpack的配置文件中加入module屬性里的loaders:
var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js', }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } };
通過指定文件后綴來執(zhí)行對(duì)應(yīng)的loader操作,我們甚至可以輕松的引入其他類型的文件,最后所有被引入進(jìn)來的文件都會(huì)統(tǒng)統(tǒng)打包到bundle.js中去!
開發(fā)環(huán)境下的優(yōu)化
在開發(fā)React組件的代碼中,在webpack的幫助下我們都是通過require(‘react')的方式引入ReactJS,默認(rèn)的require()方法會(huì)在webpack打包的時(shí)候去遍歷ReactJS及其依賴。試想下,如果我們還引入了其他的庫,例如jQuery、react-router、moment等,require都會(huì)以同樣的方式去遍歷,這會(huì)大大增加打包的時(shí)間。這顯然會(huì)影響到開發(fā)的效率。
為了能夠盡可能的加速打包過程,我們應(yīng)該重寫它的行為,鼓勵(lì)在開發(fā)中使用依賴的壓縮版本
假如我們只引入了react,我們可以這樣修改webpack.config.js:
var path = require('path'); var node_modules = path.resolve(__dirname, 'node_modules'); var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); var config = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], resolve: { alias: { 'react': pathToReact } }, output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js' }, module: { noParse: [pathToReact], loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } }; module.exports = config;
resolve屬性里的alias用來告訴webpack,當(dāng)引入react時(shí),試圖去匹配壓縮過的react;
而module中的noParse則是告訴當(dāng)webpack嘗試去解析壓縮文件時(shí),這種行為是不允許的。
當(dāng)然啦,細(xì)心的你可能會(huì)發(fā)現(xiàn)當(dāng)引入更多的庫時(shí),這樣寫多少會(huì)顯得有點(diǎn)冗余,為此下面有個(gè)更加優(yōu)雅的寫法:
var path = require('path'); var node_modules_dir = path.join(__dirname, 'node_modules'); var deps = [ 'react/dist/react.min.js', 'react-router/dist/react-router.min.js', 'moment/min/moment.min.js' ]; var config = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], resolve: { alias: {} }, output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js' }, module: { noParse: [], loaders: [{ test: /\.jsx?$/, loader: 'babel' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, loader: 'style!css!less' },{ test: /\.(png|jpg)$/, loader: 'url?limit=25000' }] } }; deps.forEach(function (dep) { var depPath = path.resolve(node_modules_dir, dep); config.resolve.alias[dep.split(path.sep)[0]] = depPath; config.module.noParse.push(depPath); }); module.exports = config;
瞬間biger起來了,待加以修飾之后,讓我們更加便捷高效的享受React與Webpack帶來的樂趣吧。
相關(guān)的代碼請(qǐng)狠狠點(diǎn)擊這里查看,自行體驗(yàn)下哈
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React+高德地圖實(shí)時(shí)獲取經(jīng)緯度,定位地址
思路其實(shí)沒有那么復(fù)雜,把地圖想成一個(gè)盒子容器,地圖中心點(diǎn)想成盒子中心點(diǎn);扎點(diǎn)在【地圖中心點(diǎn)】不會(huì)動(dòng),當(dāng)移動(dòng)地圖時(shí),去獲取【地圖中心點(diǎn)】經(jīng)緯度,設(shè)置某個(gè)位置的時(shí)候,將經(jīng)緯度設(shè)置為【地圖中心點(diǎn)】即可2021-06-06react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實(shí)現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-02-02React狀態(tài)更新的優(yōu)先級(jí)機(jī)制源碼解析
這篇文章主要為大家介紹了React狀態(tài)更新的優(yōu)先級(jí)機(jī)制源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11React?Hooks項(xiàng)目實(shí)戰(zhàn)
React?Hooks是React?16.8版本引入的新特性,它使得在函數(shù)組件中也能夠使用狀態(tài)(state)和其他React特性,本文就來詳細(xì)介紹一下React?Hooks項(xiàng)目實(shí)戰(zhàn),感興趣的可以了解一下2023-11-11解決React報(bào)錯(cuò)Rendered more hooks than during
這篇文章主要為大家介紹了React報(bào)錯(cuò)Rendered more hooks than during the previous render解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12react拖拽組件react-sortable-hoc的使用
本文主要介紹了react拖拽組件react-sortable-hoc的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02