WebPack在React專案架構中的應用實踐
前言
說起WebPack的發展歷程,不由想起了一那句“千里馬常有,而伯樂不成有的”的名言,相信很多人都聽說過Grunt, Gulp 這樣的架構工具,但是卻很少有人涉及應用過Webpack, 但是由於React的技術框架的風靡一時,webpack的地位以及應用度得到了很大的提升,這不得不感謝Facebook的架構。
對此,我也談一下webpack在React專案中的應用實踐,究竟為何要用這樣一個技術架構。
什麼是webpack
首先,webpack是一款前端的架構工具,也是近期最火的一款模組載入器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。
我們可以直接使用 require(XXX) 或者import(XXX)的形式來引入各模組,即使它們可能需要經過編譯(比如JSX和sass), webpack擁有很多的模組載入器(loader)來處理這些問題。
webpack的優勢何在
- webpack 是以 commonJS 的形式來書寫指令碼滴,但對 AMD/CMD 的支援也很全面,方便舊專案進行程式碼遷移。
- 支援多種檔案資源,比如js, coffee等等。
- 配置簡單,開發便捷,比如打包、壓縮混淆、圖片轉base64等。
- 擴充套件性強,外掛機制完善,特別是支援 React 熱載入外掛( react-hot-loader )
安裝
我們常規直接使用 npm 的形式來安裝:
$ npm install webpack -g
常規專案還是把依賴寫入 package.json 包去更人性化:
$ npm init
$ npm install webpack --save-dev
配置
每個webpack的工程都會有一個配置檔案,就比如grunt中的gruntfile.js, gulp中的gulpfile.js。
webpack中的檔名字叫做webpack.config.js, 這個檔案需要在專案根目錄建立,預設的執行指令為‘webpack’。
簡單配置:
module.exports = {
entry : './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}]
}
};
這裡解釋一下幾個屬性的作用:
- entry:使用者配置整個專案工程檔案的入口點。
- output:用於配置解析編譯後生成壓縮檔案路徑。
- module: 主要定義專案中的解析器例如css, jsx, babel等等,這個很想gulp,grunt的task,這裡比較好的一點是我們不需要require這些loader,但是需要額外安裝的。 而gulp是需要的。
可以配置多個entry:
var path = require('path');
var config = {
entry: {
admin: './admin/index.js',
consumer: './consumer/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/dist/',
filename: '[name].bundle.js'
}
};
module.exports = config;
上面程式碼中的path, __dirname為webpack特有的方法屬性用於指定路徑。
常用loader的分析
對於webpack來講,可貴之處在於提供了大量可用的loader處理我們的資原始檔,Loader 是支援鏈式執行的,如處理 sass 檔案的 loader,可以由 sass-loader、css-loader、style-loader 組成,由 compiler 對其由右向左執行,第一個 Loader 將會拿到需處理的原內容,上一個 Loader 處理後的結果回傳給下一個接著處理,最後的 Loader 將處理後的結果以 String 或 Buffer 的形式返回給 compiler。
如下常用幾項:
前處理器
- css-loader 處理css中路徑引用等問題
- style-loader 動態把樣式寫入css
- sass-loader scss編譯器
- less-loader less編譯器
- postcss-loader scss再處理
loaders之 js處理
- babel-loader
- jsx-loader
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
image-loader
loader安裝:
sudo install image-webpack-loader --save-dev
config程式碼:
module: {
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
url-loader
sudo npm install url-loader --save-dev
url-loader的功能和image-loader功能比較類似,只是url-loader可以k控制小於某個大小的圖片轉成dataurl。
plugin的應用
webpack的plugin可以幫助開發者處理壓縮混淆等程式碼上的問題,使用也是相當方便,具體我們看一下程式碼:
plugins: [
//單獨生成html檔案
new HtmlWebpackPlugin({
filename: '../index.html',//生成的html及存放路徑,相對於path
template: './src/index.html',//載入檔案及路徑
publicPath: "js/",//這是build檔案下html檔案引用js檔案的路徑
chunks: ['index'],//需要引入的chunk,不配置就會引入所有頁面的資源
}),
// 使用browser-sync實時重新整理頁面
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: { baseDir: ['./build/'] }//會預設訪問./build/index.html
}),
//負責壓縮JS程式碼,並控制是否要顯示警告
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
這裡主要說明一下一下幾個個外掛:
new webpack.optimize.DedupePlugin()
主要查詢相等或近似的模組,避免在最終生成的檔案中出現重複的模組,比如可以用它去除依賴中重複的外掛。
new webpack.optimize.OccurenceOrderPlugin()
這個外掛為元件和模組分配ID,通過這個外掛webpack可以分析和優先考慮使用最多的模組,併為它們分配最小的ID,通過分析ID,可以建議降低總檔案的大小。
new webpack.HotModuleReplacementPlugin()
全域性開啟程式碼熱替換,
new ExtractTextPlugin("styles.css")
預設情況下,css是被打包到js中的如果接受不了,我們可以應用這個plugin將css style提取出來。
webpack-dev-server使用
webpack-dev-server比較好用的地方在於熱替換,更改後不需要重新重新整理瀏覽器,配置上相比其他工具容易的多。簡稱(HMR).
sudo npm install webpack-dev-server --save-dev
我們只要在啟動時候指定 –hot指令即可,例如:
webpack-dev-server --progress --colors --hot --inline -d
可以直接複製使用哦,開啟url, 嘗試修改程式碼,看看能否自動重新整理!
執行指令分析
webpack的執行相對簡單:
webpack -watch 提供watch方法,實時進行打包更新
webpack -p 對打包後的檔案進行壓縮
webpack -d 提供SourceMaps,方便除錯
webpack --colors 輸出結果帶彩色,比如:會用紅色顯示耗時較長的步驟
webpack --profile 輸出效能資料,可以看到每一步的耗時
webpack --display-modules 預設情況下 node_modules 下的模組會被隱藏,加上這個引數可以顯示這些被隱藏的模組
通常情況下我們也會用npm包管理器進行封裝,以便於使用,例如:
"scripts": {
"start": "./node_modules/.bin/webpack -d --progress --colors --watch",
"build/":"./node_modules/.bin/webpack -p"
}
總結
總體上來講,webpack並不是一個新的工具,之前使用範圍也不是很廣泛,但是自由其過人之處,很多loader還有待繼續完善,相信之後的版本會給大家一個不錯的驚喜。