前言
這篇文章不是有關(guān)React和Webpack的教程，只是一篇能夠讓你快速上手使用目前這兩種熱門技術(shù)的前端指南，并假設(shè)你對兩者有一個基本的認(rèn)識。如果你想先行了解下React，可以放肆的移步至 React官方教程，如果你已經(jīng)使用了其他的模塊加載與資源打包技術(shù)，不妨也來看看 Webpack 提供的思路。
webstorm+react+webpack
強(qiáng)烈推薦使用webstorm！。（當(dāng)然你完全可以使用諸如atom，Sublime之類的編輯器，但之所以選擇webstorm是因?yàn)樗J(rèn)支持對react JSX 的語法高亮以及可以手動開啟Emmet對jsx的支持，棒棒噠~）
首先請這么組織你的項(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配置文件
新建一個名為webpack.config.js的文件，它應(yīng)該長這個樣：
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，同時修改webpack的配置文件來達(dá)到類似BrowserSync（即文件修改能被監(jiān)聽，并自動刷新瀏覽器）的效果！
我們先打開package.json，并找到scripts代碼塊。在沒引入webpack-dev-server之前，我們運(yùn)行這個項(xiàng)目的姿勢是這樣的：
修改scripts為
"scripts": { "build": "webpack"}并且執(zhí)行：
npm run build
項(xiàng)目就跑起來啦，但是每次修改程序我們都要手動輸入npm run build來跑項(xiàng)目，這無疑是一件非常蛋疼的事情。但有了webpack-dev-server光環(huán)，我們的姿勢應(yīng)該是這樣的：
為scripts添加
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"}ps：dev里各屬性值的意思是：
并且在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)行改動時瀏覽器可以自動刷新。
最后執(zhí)行：
npm run dev
你只要在瀏覽器打開這個地址：http://localhost:8080，webpack-dev-server會為你準(zhǔn)備好一切，你只要敲一敲鍵盤，save一下，所見即所得。
Webpack Loader
講到這里，我們基本上就可以迅速搭建一個簡單的web項(xiàng)目，但不得不提的是webpack loader。它是我個人認(rèn)為相比于其他模塊加載更牛X的地方，將它用于react的開發(fā)，結(jié)合react與生俱來的優(yōu)越性能，兩者天衣無縫的配合簡直就是黃金組合。
總的來說webpack loader可以實(shí)現(xiàn)：
。。。。。等等等
為了能夠讓以上功能奏效，我們要先安裝對應(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í)行對應(yīng)的loader操作，我們甚至可以輕松的引入其他類型的文件，最后所有被引入進(jìn)來的文件都會統(tǒng)統(tǒng)打包到bundle.js中去！
開發(fā)環(huán)境下的優(yōu)化
在開發(fā)React組件的代碼中，在webpack的幫助下我們都是通過require(‘react')的方式引入ReactJS，默認(rèn)的require()方法會在webpack打包的時候去遍歷ReactJS及其依賴。試想下，如果我們還引入了其他的庫，例如jQuery、react-router、moment等，require都會以同樣的方式去遍歷，這會大大增加打包的時間。這顯然會影響到開發(fā)的效率。
為了能夠盡可能的加速打包過程，我們應(yīng)該重寫它的行為，鼓勵在開發(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時，試圖去匹配壓縮過的react；
而module中的noParse則是告訴當(dāng)webpack嘗試去解析壓縮文件時，這種行為是不允許的。
當(dāng)然啦，細(xì)心的你可能會發(fā)現(xiàn)當(dāng)引入更多的庫時，這樣寫多少會顯得有點(diǎn)冗余，為此下面有個更加優(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)的代碼請狠狠點(diǎn)擊這里查看，自行體驗(yàn)下哈
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
