這篇文章主要介紹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)化營(yíng)銷經(jīng)驗(yàn)，我們已為成百上千中小企業(yè)提供了成都網(wǎng)站建設(shè)、做網(wǎng)站解決方案，按需網(wǎng)站開(kāi)發(fā)，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

步驟

1.傳統(tǒng)項(xiàng)目中的問(wèn)題

在不依賴任何自動(dòng)化、模塊化工具的項(xiàng)目中，通常我們的代碼是這樣的：

index.html

app/index.js

function main() {
 $('body').html('hello world!');
}
main();

 以上示例中，腳本之間存在著隱式依賴關(guān)系。

index.js取決于被包括在頁(yè)面運(yùn)行之前的jQuery，它只是假設(shè)有一個(gè)全局變量$的存在。

這樣管理JavaScript項(xiàng)目有一些問(wèn)題：

如果依賴項(xiàng)丟失，或者包含在錯(cuò)誤的順序中，應(yīng)用程序?qū)⒉粫?huì)運(yùn)行。

如果包含依賴項(xiàng)但沒(méi)有使用，那么瀏覽器必須下載很多不必要的代碼。

所以為了解決以上問(wèn)題，我們需要使用webpack來(lái)實(shí)現(xiàn)一些改變。

2.準(zhǔn)備

首先我們得在項(xiàng)目中安裝webpack，我們打開(kāi)命令行工具運(yùn)行：

mkdir demo && cd demo // 新建demo文件夾并打開(kāi)
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的存在，這樣就不存在隱式依賴的問(wèn)題（沒(méi)有全局污染）。

改變后的index.html

這里我們的index.html文件只引入了最終打包后的bundle.js?，F(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覽器中打開(kāi)index.html頁(yè)面可以看到輸出的“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中通過(guò)module.exports導(dǎo)出str變量，然后在index.js通過(guò)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來(lái)統(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)行簡(jiǎn)化的命令：

webpack

webapck會(huì)自動(dòng)去尋找當(dāng)前目錄下的webpack.config.js文件。

6.壓縮

上一步我們利用webpack命令將多個(gè)多件打包到了一個(gè)bundle.js的文件中，但是并未進(jìn)行壓縮，你可以打開(kāi)bundle.js進(jìn)行查看。

而如果我們需要對(duì)打包后的代碼進(jìn)一步壓縮處理，我們可以運(yùn)行命令：

webpack -p

這時(shí)我們可以來(lái)進(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)化

上方我們通過(guò)webpack的壓縮命令將文件打包并壓縮了，但是對(duì)于webpack -p壓縮后的文件來(lái)說(shuō)其實(shí)還有壓縮的余地。如果你使用的是webpack1.0，那么你可以在配置文件中添加plugins配置項(xiàng)，并且加入如下插件：

var webpack = require('webpack');
module.exports = {
 ...
 plugins:[
 // 去除代碼塊內(nèi)的告警語(yǔ)句
 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)啟用，所以無(wú)需進(jìn)行配置。

以上是“webpack如何實(shí)現(xiàn)拆分、打包、壓縮”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！