前言
這篇文章不是有關(guān)React和Webpack的教程簿寂，只是一篇能夠讓你快速上手使用目前這兩種熱門(mén)技術(shù)的前端指南漾抬，并假設(shè)你對(duì)兩者有一個(gè)基本的認(rèn)識(shí)。如果你想先行了解下React常遂，可以放肆的移步至 React官方教程纳令，如果你已經(jīng)使用了其他的模塊加載與資源打包技術(shù)，不妨也來(lái)看看 Webpack 提供的思路克胳。
webstorm+react+webpack
強(qiáng)烈推薦使用webstorm平绩！。（當(dāng)然你完全可以使用諸如atom漠另，Sublime之類的編輯器捏雌，但之所以選擇webstorm是因?yàn)樗J(rèn)支持對(duì)react JSX 的語(yǔ)法高亮以及可以手動(dòng)開(kāi)啟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)的開(kāi)發(fā)依賴項(xiàng)目中纬傲。
創(chuàng)建webpack.config.js配置文件
新建一個(gè)名為webpack.config.js的文件，它應(yīng)該長(zhǎ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程序一樣嘹锁，我們把最終要插入到頁(yè)面指定位置的react模板寫(xiě)入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的配置文件來(lái)達(dá)到類似BrowserSync（即文件修改能被監(jiān)聽(tīng)，并自動(dòng)刷新瀏覽器）的效果面粮！
我們先打開(kāi)package.json少孝，并找到scripts代碼塊。在沒(méi)引入webpack-dev-server之前熬苍，我們運(yùn)行這個(gè)項(xiàng)目的姿勢(shì)是這樣的：
修改scripts為
"scripts": {
"build": "webpack"
}
并且執(zhí)行：
npm run build
項(xiàng)目就跑起來(lái)啦稍走，但是每次修改程序我們都要手動(dòng)輸入npm run build來(lái)跑項(xiàng)目，這無(wú)疑是一件非常蛋疼的事情柴底。但有了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
你只要在瀏覽器打開(kāi)這個(gè)地址：http://localhost:8080狐树，webpack-dev-server會(huì)為你準(zhǔn)備好一切，你只要敲一敲鍵盤(pán)鸿脓，save一下抑钟，所見(jiàn)即所得。
Webpack Loader
講到這里野哭，我們基本上就可以迅速搭建一個(gè)簡(jiǎn)單的web項(xiàng)目在塔，但不得不提的是webpack loader。它是我個(gè)人認(rèn)為相比于其他模塊加載更牛X的地方拨黔，將它用于react的開(kāi)發(fā)蛔溃，結(jié)合react與生俱來(lái)的優(yōu)越性能，兩者天衣無(wú)縫的配合簡(jiǎn)直就是黃金組合蓉驹。
總的來(lái)說(shuō)webpack loader可以實(shí)現(xiàn)：
- 可以將React JSX語(yǔ)法轉(zhuǎn)為js語(yǔ)句
- React開(kāi)發(fā)中支持ES6語(yǔ)法
- 支持通過(guò)import來(lái)直接引入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'
}]
}
};
通過(guò)指定文件后綴來(lái)執(zhí)行對(duì)應(yīng)的loader操作正勒，我們甚至可以輕松的引入其他類型的文件得院，最后所有被引入進(jìn)來(lái)的文件都會(huì)統(tǒng)統(tǒng)打包到bundle.js中去！
開(kāi)發(fā)環(huán)境下的優(yōu)化
在開(kāi)發(fā)React組件的代碼中章贞，在webpack的幫助下我們都是通過(guò)require(‘react’)的方式引入ReactJS祥绞，默認(rèn)的require()方法會(huì)在webpack打包的時(shí)候去遍歷ReactJS及其依賴。試想下鸭限，如果我們還引入了其他的庫(kù)蜕径，例如jQuery、react-router败京、moment等兜喻，require都會(huì)以同樣的方式去遍歷，這會(huì)大大增加打包的時(shí)間赡麦。這顯然會(huì)影響到開(kāi)發(fā)的效率朴皆。
為了能夠盡可能的加速打包過(guò)程，我們應(yīng)該重寫(xiě)它的行為泛粹，鼓勵(lì)在開(kāi)發(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用來(lái)告訴webpack，當(dāng)引入react時(shí)戚扳，試圖去匹配壓縮過(guò)的react忧便；
而module中的noParse則是告訴當(dāng)webpack嘗試去解析壓縮文件時(shí)，這種行為是不允許的帽借。
當(dāng)然啦珠增，細(xì)心的你可能會(huì)發(fā)現(xiàn)當(dāng)引入更多的庫(kù)時(shí)，這樣寫(xiě)多少會(huì)顯得有點(diǎn)冗余砍艾，為此下面有個(gè)更加優(yōu)雅的寫(xiě)法：
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起來(lái)了蒂教，待加以修飾之后，讓我們更加便捷高效的享受React與Webpack帶來(lái)的樂(lè)趣吧脆荷。
相關(guān)的代碼請(qǐng)狠狠點(diǎn)擊這里查看凝垛，自行體驗(yàn)下哈
