這篇文章主要介紹webpack如何實(shí)現(xiàn)拆分、打包、壓縮,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì),在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十載,專業(yè)且經(jīng)驗(yàn)豐富。十載網(wǎng)站優(yōu)化營銷經(jīng)驗(yàn),我們已為成百上千中小企業(yè)提供了成都網(wǎng)站建設(shè)、做網(wǎng)站解決方案,按需網(wǎng)站開發(fā),設(shè)計(jì)滿意,售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!
步驟
1.傳統(tǒng)項(xiàng)目中的問題
在不依賴任何自動(dòng)化、模塊化工具的項(xiàng)目中,通常我們的代碼是這樣的:
index.html
<html> <head> <title>傳統(tǒng)項(xiàng)目</title> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> </head> <body> <script src="app/index.js"></script> </body> </html>
app/index.js
function main() { $('body').html('hello world!'); } main();
以上示例中,腳本之間存在著隱式依賴關(guān)系。
index.js取決于被包括在頁面運(yùn)行之前的jQuery,它只是假設(shè)有一個(gè)全局變量$的存在。
這樣管理JavaScript項(xiàng)目有一些問題:
如果依賴項(xiàng)丟失,或者包含在錯(cuò)誤的順序中,應(yīng)用程序?qū)⒉粫?huì)運(yùn)行。
如果包含依賴項(xiàng)但沒有使用,那么瀏覽器必須下載很多不必要的代碼。
所以為了解決以上問題,我們需要使用webpack來實(shí)現(xiàn)一些改變。
2.準(zhǔn)備
首先我們得在項(xiàng)目中安裝webpack,我們打開命令行工具運(yùn)行:
mkdir demo && cd demo // 新建demo文件夾并打開 npm init // 初始化npm,生成package.json配置文件 npm install --save-dev webpack@beta // 安裝webpack2.0版本,mac系統(tǒng)可能需要添加sudo命令
以上使用的npm命令需要安裝node.js,可以點(diǎn)擊這里安裝即可:node.js
為了改進(jìn)上方傳統(tǒng)項(xiàng)目中的不足,我們這里還需要安裝jQuery:
npm install --save jQuery // 安裝jQuery
3.改變
改變后的index.js
var $ = require('jquery'); function main() { $('body').html('hello world!'); } main();
這里我們可以直接在index.js里引用jQuery,index.js明確要求jQuery的存在,這樣就不存在隱式依賴的問題(沒有全局污染)。
改變后的index.html
<html> <head> <title>webpack項(xiàng)目</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html>
這里我們的index.html文件只引入了最終打包后的bundle.js。現(xiàn)在運(yùn)行webpack命令將index.js輸出為bundle.js。
運(yùn)行命令:webpack app/index.js dist/bundle.js
webpack app/index.js dist/bundle.js Hash: 3bb91a6dedfc2a2a1c08 Version: webpack 2.2.0-rc.4 Time: 397ms Asset Size Chunks Chunk Names bundle.js 270 kB 0 [emitted] [big] main [0] ./~/jquery/dist/jquery.js 267 kB {0} [built] [1] ./app/index.js 83 bytes {0} [built]
最終我們?cè)跒g覽器中打開index.html頁面可以看到輸出的“hello world!”。
4.拆分
現(xiàn)在如果我們index.js中的”hello world!”字符串需要放到另外一個(gè)hello.js中,然后在index.js中引入使用的話,這就涉及到webpack模塊拆分的功能。
app/index.js
var $ = require('jquery'); var str = require('./hello.js'); function main() { $('body').html(str); } main();
app/hello.js
var str = 'hello world!'; module.exports = str;
我們?cè)趆ello.js中通過module.exports導(dǎo)出str變量,然后在index.js通過require導(dǎo)入同樣可以實(shí)現(xiàn)瀏覽器中輸入“hello world!”的效果,當(dāng)然我們需要重新運(yùn)行下webpack命令:webpack app/index.js dist/bundle.js
5.打包
其實(shí)在上面我們已經(jīng)使用了打包命令:
webpack app/index.js dist/bundle.js
其中的app/index.js即為打包的入口文件,而dist/bundle.js為輸出文件。
但是我們會(huì)發(fā)現(xiàn)這樣的命令不利于我們復(fù)雜項(xiàng)目配置的使用,對(duì)于更復(fù)雜的配置,我們可以利用配置文件webpack.config.js來統(tǒng)一管理。
我們可以在demo文件夾下新建webpack.config.js配置文件:
module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: './dist' } }
上方配置中的entry就是我們的入口文件,可以有多個(gè)入口文件,而output即為webpack打包的輸入對(duì)象,filename為輸出文件名,path為輸出路徑。
如此我們運(yùn)行命令行:
webpack --config webpack.config.js
同樣可以生成打包目錄dist及打包文件bundle.js。
當(dāng)然你也可以直接運(yùn)行簡化的命令:
webpack
webapck會(huì)自動(dòng)去尋找當(dāng)前目錄下的webpack.config.js文件。
6.壓縮
上一步我們利用webpack命令將多個(gè)多件打包到了一個(gè)bundle.js的文件中,但是并未進(jìn)行壓縮,你可以打開bundle.js進(jìn)行查看。
而如果我們需要對(duì)打包后的代碼進(jìn)一步壓縮處理,我們可以運(yùn)行命令:
webpack -p
這時(shí)我們可以來進(jìn)行下打包和壓縮的文件大小對(duì)比
打包命令:webpack
webpack Hash: ab4a1091f0880100eab0 Version: webpack 2.2.0-rc.4 Time: 387ms Asset Size Chunks Chunk Names bundle.js 270 kB 0 [emitted] [big] main [0] ./app/hello.js 50 bytes {0} [built] [1] ./~/jquery/dist/jquery.js 267 kB {0} [built] [2] ./app/index.js 114 bytes {0} [built]
輸出的bundle.js整個(gè)文件大小為270 kB。
壓縮命令:webpack -p
webpack -p Hash: ab4a1091f0880100eab0 Version: webpack 2.2.0-rc.4 Time: 1967ms Asset Size Chunks Chunk Names bundle.js 88.3 kB 0 [emitted] main [0] ./app/hello.js 50 bytes {0} [built] [1] ./~/jquery/dist/jquery.js 267 kB {0} [built] [2] ./app/index.js 114 bytes {0} [built]
輸出的bundle.js整個(gè)文件大小為88.3 kB。
很明顯,文件被壓縮了。
7.進(jìn)一步壓縮優(yōu)化
上方我們通過webpack的壓縮命令將文件打包并壓縮了,但是對(duì)于webpack -p壓縮后的文件來說其實(shí)還有壓縮的余地。如果你使用的是webpack1.0,那么你可以在配置文件中添加plugins配置項(xiàng),并且加入如下插件:
var webpack = require('webpack'); module.exports = { ... plugins:[ // 去除代碼塊內(nèi)的告警語句 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), // 優(yōu)先考慮使用最多的模塊,并為它們分配最小的ID new webpack.optimize.OccurenceOrderPlugin() ] ... }
而本示例中使用的是webpack2.0版本,在2.0中UglifyJsPlugin的compress選項(xiàng)默認(rèn)為false,并且OccurrenceOrderPlugin默認(rèn)啟用,所以無需進(jìn)行配置。
以上是“webpack如何實(shí)現(xiàn)拆分、打包、壓縮”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:webpack如何實(shí)現(xiàn)拆分、打包、壓縮
當(dāng)前網(wǎng)址:http://www.muchs.cn/article0/gehdio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、標(biāo)簽優(yōu)化、建站公司、定制開發(fā)、軟件開發(fā)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)