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