前言
這是我第一篇介紹webpack的文章，先從一個(gè)入門教程開始吧荸哟，后續(xù)會(huì)有更多相關(guān)webpack的文章推出。
首先什么是webpack？如果說它是一個(gè)打包工具那真的是有點(diǎn)大材小用了滥朱。我個(gè)人認(rèn)為webpack是一個(gè)集前端自動(dòng)化、模塊化力试、組件化于一體的可拓展系統(tǒng)徙邻，你可以根據(jù)自己的需要來進(jìn)行一系列的配置和安裝，最終實(shí)現(xiàn)你需要的功能并進(jìn)行打包輸出畸裳。
本文作為一篇入門教程缰犁，這里先從webpack最簡單的3招開始介紹，即拆分怖糊、打包帅容、壓縮。
步驟
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配置文件：
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '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)行配置。
結(jié)語
本文主要介紹了webpack入門的一些簡單命令和基本配置信息幅狮，從代碼拆分募强、打包株灸、壓縮的角度和傳統(tǒng)的前端項(xiàng)目進(jìn)行對(duì)比，希望以此加深大家對(duì)webpack基礎(chǔ)知識(shí)的印象擎值。
