您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)webpack如何獨(dú)立打包和緩存處理,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
webpack最基本的配置文件來(lái)打包壓縮我們的代碼:
var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }
在入口文件index.js中我們引入了jQuery:
// index.js var $ = require('jquery'); var str = require('./hello.js'); function main() { $('body').html(str); } main();
這樣我們雖然能夠?qū)崿F(xiàn)代碼的統(tǒng)一打包,將jQuery、index.js、hello.js統(tǒng)統(tǒng)打包到了bundle.js里,但是會(huì)存在一個(gè)問(wèn)題:每次打包都會(huì)生成一個(gè)體積較大的新bundle.js,瀏覽器無(wú)法緩存像jQuery這樣的基本不會(huì)改動(dòng)的框架庫(kù)代碼文件,影響加載速度。
發(fā)現(xiàn)問(wèn)題我們就來(lái)解決問(wèn)題,我們最終希望的是將像jQuery這樣的框架庫(kù)代碼與項(xiàng)目自身的代碼分開(kāi)打包,生成一個(gè)獨(dú)立的打包文件,縮減單個(gè)文件體積,瀏覽器也不用每次都進(jìn)行加載。
步驟
1、獨(dú)立打包
為了解決上述問(wèn)題,我們需要修改我們的webpack配置文件:
var webpack = require('webpack'); var path = require('path'); module.exports = { entry: { main: './app/index.js', vendor: ['jquery'] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins:[ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), ] }
上方我們將原本的單入口文件改成了多入口文件,并加入了vendor屬性。vendor屬性用于配置打包第三方類庫(kù),寫(xiě)入數(shù)組的類庫(kù)名將統(tǒng)一打包到一個(gè)文件里。
同時(shí)我們將輸出的filename用[name]變量來(lái)自動(dòng)生成文件名,最后我們添加了一個(gè)CommonsChunkPlugin的插件,用于提取vendor。
配置完成后我們運(yùn)行webpack命令:
Hash: ee1daf95c1986768927a Version: webpack 2.3.2 Time: 573ms Asset Size Chunks Chunk Names main.js 340 bytes 0 [emitted] main vendor.js 274 kB 1 [emitted] [big] vendor [0] ./~/jquery/dist/jquery.js 267 kB {1} [built] [1] ./app/hello.js 53 bytes {0} [built] [2] ./app/index.js 114 bytes {0} [built] [3] multi jquery 28 bytes {1} [built]
最終發(fā)現(xiàn)我們成功將jQuery打包到了vendor.js中,實(shí)現(xiàn)了獨(dú)立打包,但是問(wèn)題又來(lái)了:每次打包后生成的文件名都是一樣的,瀏覽器可能緩存上一次的結(jié)果而無(wú)法加載最新數(shù)據(jù)。
2、添加hash
為了解決上述問(wèn)題,我們需要為打包后的文件名添加hash值,這樣每次修改后打包的文件hash值將改變,修改配置文件如下:
module.exports = { ... output: { filename: '[name].[chunkHash:5].js', path: path.resolve(__dirname, 'dist') }, ... }
上方我們?cè)谳敵鑫募性黾恿薣chunkHash:5]變量,表示打包后的文件中加入保留5位的hash值。我們?cè)俅芜\(yùn)行打包命令:
Hash: c7d1295f2f9a27c412d2 Version: webpack 2.3.2 Time: 603ms Asset Size Chunks Chunk Names main.2a7ad.js 337 bytes 0 [emitted] main vendor.49eb4.js 274 kB 1 [emitted] [big] vendor [0] ./~/jquery/dist/jquery.js 267 kB {1} [built] [1] ./app/hello.js 50 bytes {0} [built] [2] ./app/index.js 114 bytes {0} [built] [3] multi jquery 28 bytes {1} [built]
上方我們發(fā)現(xiàn)打包后的文件成功加上了hash值,這樣每次修改文件后hash值也會(huì)跟著變,就不怕瀏覽器緩存了,但是當(dāng)我們嘗試去修改一個(gè)js文件后再次打包,問(wèn)題又來(lái)了:vendor.js的hash值也變了,我們并沒(méi)有修改jQuery的源碼。
3、修改vendor配置
上述問(wèn)題產(chǎn)生的原因是因?yàn)镃ommonsChunkPlugin插件是用于提取公共代碼的,上方我們只是提取了vendor作為公共代碼。為了繼續(xù)解決上述問(wèn)題,其實(shí)方法很簡(jiǎn)單,我們需要修改CommonsChunkPlugin的配置,如下:
module.exports = { ... plugins:[ new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'manifest'] }), ] ... }
如此我們修改一下hello.js中的代碼,發(fā)現(xiàn)vendor的hash值并未改變,并且多了一個(gè)manifest.js的小文件。manifest.js為webpack的啟動(dòng)文件代碼,它會(huì)直接影響到hash值,用mainfest單獨(dú)抽出來(lái)了,這樣vendor的hash就不會(huì)變了。
4、生成index.html
通過(guò)以上對(duì)webpack配置文件的一系列修改,我們成功實(shí)現(xiàn)了webpack的獨(dú)立打包與緩存處理,但是還差最后一步。
因?yàn)槲覀冏罱K打包后生成的文件名中帶有hash值,每次都是會(huì)變的,所以我們不能像目前這樣在index.html中寫(xiě)死路徑。
index.html
... <body> <script src="./dist/main.js"></script> <script src="./dist/vendor.js"></script> <script src="./dist/manifest.js"></script> </body> ...
以上寫(xiě)法是不對(duì)的,因?yàn)槿鄙倭丝勺兊膆ash值,因此我們希望每次打包后index.html中的路徑也會(huì)自動(dòng)加上hash值,解決方法如下:
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins:[ ... new HtmlWebpackPlugin({ title: 'demo', template: 'index.html' // 模板路徑 }), ... ] ... }
上方我們引入了html-webpack-plugin這一個(gè)插件,該插件可以幫助我們根據(jù)模板生成html文件。在plugins設(shè)置中,title配置了生成html中的title部分,template為模板html的路徑地址。
我們需要下載html-webpack-plugin:
npm install html-webpack-plugin --save-dev
安裝和配置完畢后,運(yùn)行打包命令:webpack
Hash: 0c4b91e206579b31544d Version: webpack 2.3.2 Time: 856ms Asset Size Chunks Chunk Names vendor.e1868.js 268 kB 0 [emitted] [big] vendor main.44412.js 337 bytes 1 [emitted] main manifest.ed186.js 5.81 kB 2 [emitted] manifest index.html 292 bytes [emitted] [0] ./~/jquery/dist/jquery.js 267 kB {0} [built] [1] ./app/hello.js 50 bytes {1} [built] [2] ./app/index.js 114 bytes {1} [built] [3] multi jquery 28 bytes {0} [built]
我們發(fā)現(xiàn)在dist目錄下生成了一個(gè)index.html文件,打開(kāi)該文件后代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <script type="text/javascript" src="manifest.ed186.js"></script> <script type="text/javascript" src="vendor.e1868.js"></script> <script type="text/javascript" src="main.44412.js"></script> </body> </html>
至此我們實(shí)現(xiàn)了每次打包后index.html中的路徑也會(huì)自動(dòng)加上hash值的功能,因此dist目錄下的index.html即為以后的首頁(yè)文件,最后我們?cè)跒g覽器中打開(kāi)該文件成功顯示:
關(guān)于“webpack如何獨(dú)立打包和緩存處理”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。