webpack入門必知必會

02-02

關於

微信公眾號：前端呼啦圈（Love-FED）
我的博客：勞卜的博客
知乎專欄：前端呼啦圈

前言

這是我第一篇介紹webpack的文章，先從一個入門教程開始吧，後續會有更多相關webpack的文章推出。

首先什麼是webpack？如果說它是一個打包工具那真的是有點大材小用了。我個人認為webpack是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你可以根據自己的需要來進行一系列的配置和安裝，最終實現你需要的功能並進行打包輸出。

本文作為一篇入門教程，這裡先從webpack最簡單的3招開始介紹，即拆分、打包、壓縮。

步驟

1.傳統項目中的問題

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

index.html

<html>n <head>n <title>傳統項目</title>nn </head>n <body>n <script src="app/index.js"></script>n </body>n</html>n

app/index.js

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

以上示例中，腳本之間存在著隱式依賴關係。

index.js取決於被包括在頁面運行之前的jQuery，它只是假設有一個全局變數$的存在。

這樣管理JavaScript項目有一些問題：

如果依賴項丟失，或者包含在錯誤的順序中，應用程序將不會運行。

如果包含依賴項但沒有使用，那麼瀏覽器必須下載很多不必要的代碼。

所以為了解決以上問題，我們需要使用webpack來實現一些改變。

2.準備

首先我們得在項目中安裝webpack，我們打開命令行工具運行：

mkdir demo && cd demo // 新建demo文件夾並打開nnpm init // 初始化npm，生成package.json配置文件nnpm install --save-dev webpack@beta // 安裝webpack2.0版本，mac系統可能需要添加sudo命令n

以上使用的npm命令需要安裝node.js，可以點擊這裡安裝即可：node.js

為了改進上方傳統項目中的不足，我們這裡還需要安裝jQuery：

npm install --save jQuery // 安裝jQueryn

3.改變

改變後的index.js

var $ = require(jquery);nnfunction main() {n $(body).html(hello world!);n}nnmain();n

這裡我們可以直接在index.js里引用jQuery，index.js明確要求jQuery的存在，這樣就不存在隱式依賴的問題（沒有全局污染）。

改變後的index.html

<html>n <head>n <title>webpack項目</title>n </head>n <body>n <script src="dist/bundle.js"></script>n </body>n</html>n

這裡我們的index.html文件只引入了最終打包後的bundle.js。現在運行webpack命令將index.js輸出為bundle.js。

運行命令：webpack app/index.js dist/bundle.js

webpack app/index.js dist/bundle.jsnHash: 3bb91a6dedfc2a2a1c08nVersion: webpack 2.2.0-rc.4nTime: 397msn Asset Size Chunks Chunk Namesnbundle.js 270 kB 0 [emitted] [big] mainn [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]n [1] ./app/index.js 83 bytes {0} [built]n

最終我們在瀏覽器中打開index.html頁面可以看到輸出的「hello world!」。

4.拆分

現在如果我們index.js中的」hello world!」字元串需要放到另外一個hello.js中，然後在index.js中引入使用的話，這就涉及到webpack模塊拆分的功能。

app/index.js

var $ = require(jquery);nvar str = require(./hello.js);nnfunction main() {n $(body).html(str);n}nnmain();n

app/hello.js

var str = hello world!;nnmodule.exports = str;n

我們在hello.js中通過module.exports導出str變數，然後在index.js通過require導入同樣可以實現瀏覽器中輸入「hello world!」的效果，當然我們需要重新運行下webpack命令：webpack app/index.js dist/bundle.js

5.打包

其實在上面我們已經使用了打包命令：

webpack app/index.js dist/bundle.jsn

其中的app/index.js即為打包的入口文件，而dist/bundle.js為輸出文件。

但是我們會發現這樣的命令不利於我們複雜項目配置的使用，對於更複雜的配置，我們可以利用配置文件webpack.config.js來統一管理。

我們可以在demo文件夾下新建webpack.config.js配置文件：

var path = require(path);nnmodule.exports = {n entry: ./app/index.js,n output: {n filename: bundle.js,n path: path.resolve(__dirname, dist)n }n}n

上方配置中的entry就是我們的入口文件，可以有多個入口文件，而output即為webpack打包的輸入對象，filename為輸出文件名，path為輸出路徑。

如此我們運行命令行：

webpack --config webpack.config.jsn

同樣可以生成打包目錄dist及打包文件bundle.js。

當然你也可以直接運行簡化的命令：

webpackn

webapck會自動去尋找當前目錄下的webpack.config.js文件。

6.壓縮

上一步我們利用webpack命令將多個多件打包到了一個bundle.js的文件中，但是並未進行壓縮，你可以打開bundle.js進行查看。

而如果我們需要對打包後的代碼進一步壓縮處理，我們可以運行命令：

webpack -pn

這時我們可以來進行下打包和壓縮的文件大小對比

打包命令：webpack

webpacknHash: ab4a1091f0880100eab0nVersion: webpack 2.2.0-rc.4nTime: 387msn Asset Size Chunks Chunk Namesnbundle.js 270 kB 0 [emitted] [big] mainn [0] ./app/hello.js 50 bytes {0} [built]n [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]n [2] ./app/index.js 114 bytes {0} [built]n

輸出的bundle.js整個文件大小為270 kB。

壓縮命令：webpack -p

webpack -pnHash: ab4a1091f0880100eab0nVersion: webpack 2.2.0-rc.4nTime: 1967msn Asset Size Chunks Chunk Namesnbundle.js 88.3 kB 0 [emitted] mainn [0] ./app/hello.js 50 bytes {0} [built]n [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]n [2] ./app/index.js 114 bytes {0} [built]n

輸出的bundle.js整個文件大小為88.3 kB。

很明顯，文件被壓縮了。

7.進一步壓縮優化

上方我們通過webpack的壓縮命令將文件打包並壓縮了，但是對於webpack -p壓縮後的文件來說其實還有壓縮的餘地。如果你使用的是webpack1.0，那麼你可以在配置文件中添加plugins配置項，並且加入如下插件：

var webpack = require(webpack);nnmodule.exports = {n ...n plugins:[n // 去除代碼塊內的告警語句n new webpack.optimize.UglifyJsPlugin({n compress: {n warnings: falsen }n }),n // 優先考慮使用最多的模塊，並為它們分配最小的IDn new webpack.optimize.OccurenceOrderPlugin()n ]n ...n}n

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress選項默認為false，並且OccurrenceOrderPlugin默認啟用，所以無需進行配置。

結語

本文主要介紹了webpack入門的一些簡單命令和基本配置信息，從代碼拆分、打包、壓縮的角度和傳統的前端項目進行對比，希望以此加深大家對webpack基礎知識的印象。

如果覺得本文對你有幫助，可以關注我的微信公眾號，來這裡聊點關於前端的事情。