建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹webpack如何實現(xiàn)拆分、打包、壓縮，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)深耕十載，專業(yè)且經(jīng)驗豐富。十載網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為成百上千中小企業(yè)提供了成都網(wǎng)站建設、做網(wǎng)站解決方案，按需網(wǎng)站開發(fā)，設計滿意，售后服務無憂。所有客戶皆提供一年免費網(wǎng)站維護!
步驟
1.傳統(tǒng)項目中的問題
在不依賴任何自動化、模塊化工具的項目中，通常我們的代碼是這樣的：
index.html
傳統(tǒng)項目
app/index.js
function main() {
$('body').html('hello world!');
}
main();以上示例中，腳本之間存在著隱式依賴關系。
index.js取決于被包括在頁面運行之前的jQuery，它只是假設有一個全局變量$的存在。
這樣管理JavaScript項目有一些問題：
如果依賴項丟失，或者包含在錯誤的順序中，應用程序將不會運行。
如果包含依賴項但沒有使用，那么瀏覽器必須下載很多不必要的代碼。
所以為了解決以上問題，我們需要使用webpack來實現(xiàn)一些改變。
2.準備
首先我們得在項目中安裝webpack，我們打開命令行工具運行：
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，可以點擊這里安裝即可：node.js
為了改進上方傳統(tǒ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
webpack項目
這里我們的index.html文件只引入了最終打包后的bundle.js?，F(xiàn)在運行webpack命令將index.js輸出為bundle.js。
運行命令：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]最終我們在瀏覽器中打開index.html頁面可以看到輸出的“hello world!”。
4.拆分
現(xiàn)在如果我們index.js中的”hello world!”字符串需要放到另外一個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;
我們在hello.js中通過module.exports導出str變量，然后在index.js通過require導入同樣可以實現(xiàn)瀏覽器中輸入“hello world!”的效果，當然我們需要重新運行下webpack命令：webpack app/index.js dist/bundle.js
5.打包
其實在上面我們已經(jīng)使用了打包命令：
webpack app/index.js dist/bundle.js
其中的app/index.js即為打包的入口文件，而dist/bundle.js為輸出文件。
但是我們會發(fā)現(xiàn)這樣的命令不利于我們復雜項目配置的使用，對于更復雜的配置，我們可以利用配置文件webpack.config.js來統(tǒng)一管理。
我們可以在demo文件夾下新建webpack.config.js配置文件：
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: './dist'
}
}上方配置中的entry就是我們的入口文件，可以有多個入口文件，而output即為webpack打包的輸入對象，filename為輸出文件名，path為輸出路徑。
如此我們運行命令行：
webpack --config webpack.config.js
同樣可以生成打包目錄dist及打包文件bundle.js。
當然你也可以直接運行簡化的命令：
webpack
webapck會自動去尋找當前目錄下的webpack.config.js文件。
6.壓縮
上一步我們利用webpack命令將多個多件打包到了一個bundle.js的文件中，但是并未進行壓縮，你可以打開bundle.js進行查看。
而如果我們需要對打包后的代碼進一步壓縮處理，我們可以運行命令：
webpack -p
這時我們可以來進行下打包和壓縮的文件大小對比
打包命令：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整個文件大小為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整個文件大小為88.3 kB。
很明顯，文件被壓縮了。
7.進一步壓縮優(yōu)化
上方我們通過webpack的壓縮命令將文件打包并壓縮了，但是對于webpack -p壓縮后的文件來說其實還有壓縮的余地。如果你使用的是webpack1.0，那么你可以在配置文件中添加plugins配置項，并且加入如下插件：
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選項默認為false，并且OccurrenceOrderPlugin默認啟用，所以無需進行配置。
以上是“webpack如何實現(xiàn)拆分、打包、壓縮”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁標題：webpack如何實現(xiàn)拆分、打包、壓縮
網(wǎng)站路徑：http://www.dlmjj.cn/article/gehdio.html
