webpack：從入門到真實項目配置

該文使用的 Webpack 版本為 3.6.0，本文分兩部分。第一步是簡單的使用 webpack，第二部分通過一個真實項目來配置 webpack，沒有使用任何的 CLI，都是一步步配置直到完成生產代碼的打包。這是本項目對應的倉庫，每個小節基本都對應了一次 commit。

這是本文的大綱，如果覺得有興趣你就可以往下看了。

1

Webpack 到底是什麼

自從出現模塊化以後，大家可以將原本一坨代碼分離到個個模塊中，但是由此引發了一個問題。每個 JS 文件都需要從伺服器去拿，由此會導致載入速度變慢。Webpack 最主要的目的就是為了解決這個問題，將所有小文件打包成一個或多個大文件，官網的圖片很好的詮釋了這個事情，除此之外，Webpack 也是一個能讓你使用各種前端新技術的工具。

2

簡 單 使 用

安裝

在命令行中依次輸入。

然後按照下圖創建文件。

在以下文件寫入代碼。

現在我們可以開始使用 webpack 了，在命令行中輸入。

沒問題的話你應該可以看到類似的樣子。

可以發現原本兩個 JS 文件只有 100B，但是打包後卻增長到 2.66KB，這之中 webpack 肯定做了什麼事情，我們去 bundle.js 文件中看看。

把代碼簡化以後，核心思路是這樣的。

因為 module.export 瀏覽器是不支持的，所以 webpack 將代碼改成瀏覽器能識別的樣子。現在將 index.html 文件在瀏覽器中打開，應該也可以看到正確的 log。

我們之前是在文件夾中安裝的 webpack，每次要輸入 node_modules/.bin/webpack 過於繁瑣，可以在 package.json 如下修改：

然後再次執行 npm run start，可以發現和之前的效果是相同的。簡單的使用到此為止，接下來我們來探索 webpack 更多的功能。

3

Loader

Loader 是 webpack 一個很強大功能，這個功能可以讓你使用很多新的技術。

Babel

Babel 可以讓你使用 ES2015/16/17 寫代碼而不用顧忌瀏覽器的問題，Babel 可以幫你轉換代碼。首先安裝必要的幾個 Babel 庫。

先介紹下我們安裝的三個庫

babel-loader 用於讓 webpack 知道如何運行 babel

babel-core 可以看做編譯器，這個庫知道如何解析代碼

babel-preset-env 這個庫可以根據環境的不同轉換代碼

接下來更改 webpack-config.js 中的代碼。

配置 Babel 有很多方式，這裡推薦使用 .babelrc 文件管理。

現在將之前 JS 的代碼改成 ES6 的寫法。

執行 npm run start，再觀察 bundle.js 中的代碼，可以發現代碼被轉換過了，並且同樣可以正常 輸出3。

當然 Babel 遠不止這些功能，有興趣的可以前往官網自己探索。

處理圖片

這一小節我們將使用 url-loader 和 file-loader，這兩個庫不僅可以處理圖片，還有其他的功能，有興趣的可以自行學習。

先安裝庫。

創建一個 images 文件夾，放入兩張圖片，並且在 app 文件夾下創建一個 js 文件處理圖片，目前的文件夾結構如圖：

運行 npm run start，打包成功如下圖：

可以發現大的圖片被單獨提取了出來，小的圖片打包進了 bundle.js 中。

可以發現大的圖片被單獨提取了出來，小的圖片打包進了 bundle.js 中。

最後運行下 npm run start，編譯成功了，再次刷新下頁面，可以發現這次大圖被正確的顯示了。下一小節我們將介紹如何處理 CSS 文件。

處理 CSS 文件

添加 styles 文件夾，新增 addImage.css 文件，然後在該文件中新增代碼。

這一小節我們先使用 css-loader 和 style-loader 庫。前者可以讓 CSS 文件也支持 impost，並且會解析 CSS 文件，後者可以將解析出來的 CSS 通過標籤的形式插入到 HTML 中，所以後面依賴前者。

首先修改 addImage.js 文件。

運行下 npm run start，然後刷新頁面，可以發現圖片被正確的加上了邊框，現在我們來看一下 HTML 的文件結構。

從上圖可以看到，我們在 addImage.css 文件中寫的代碼被加入到了 style 標籤中，並且因為我們開啟了 CSS 模塊化的選項，所以 .test 被轉成了唯一的哈希值，這樣就解決了 CSS 的變數名重複問題。

但是將 CSS 代碼整合進 JS 文件也是有弊端的，大量的 CSS 代碼會造成 JS 文件的大小變大，操作 DOM 也會造成性能上的問題，所以接下來我們將使用 extract-text-webpack-plugin 插件將 CSS 文件打包為一個單獨文件。

首先安裝 npm i --save-dev extract-text-webpack-plugin。

運行下 npm run start，可以發現 CSS 文件被單獨打包出來了。

但是這時候刷新頁面會發現圖片的邊框消失了，那是因為我們的 HTML 文件沒有引用新的 CSS 文件，所以這裡需要我們手動引入下，在下面的章節我們會通過插件的方式自動引入新的文件。

接下來，會用一個項目來繼續我們的 webpack 學習，在這之前，先 clone 一下項目。該項目原地址是 這裡，因為使用的 webpack 版本太低，並且依賴的庫也有點問題，故我將項目拷貝了過來並修改了幾個庫的版本號。

請依次按照以下代碼操作。

4

如何在項目中使用 webpack

項目中已經配置了很簡單的 babel 和 webpack，直接運行 npm run build 即可。

這時候你會發現這個 bundle.js 居然有這麼大，這肯定是不能接受的，所以接下來章節的主要目的就是將單個文件拆分為多個文件，優化項目。

分離代碼

先讓我們考慮下緩存機制。對於代碼中依賴的庫很少會去主動升級版本，但是我們自己的代碼卻每時每刻都在變更，所以我們可以考慮將依賴的庫和自己的代碼分割開來，這樣用戶在下一次使用應用時就可以盡量避免重複下載沒有變更的代碼，那麼既然要將依賴代碼提取出來，我們需要變更下入口和出口的部分代碼。

現在我們 build 一下，看看是否有驚喜出現。

真的有驚喜……為什麼 bundle 文件大小壓根沒變。這是因為 bundle 中也引入了依賴庫的代碼,剛才的步驟並沒有抽取 bundle 中引入的代碼，接下來讓我們學習如何將共同的代碼抽取出來。

抽取共同代碼

在這小節我們使用 webpack 自帶的插件 CommonsChunkPlugin。

當我們重新 build 以後，會發現 bundle 文件很明顯的減小了體積。

但是我們使用哈希來保證緩存的同時會發現每次 build 都會生成不一樣的文件，這時候我們引入另一個插件來幫助我們刪除不需要的文件。

然後修改配置文件。

然後 build 的時候會發現以上文件被刪除了。

因為我們現在將文件已經打包成三個 JS 了，以後也許會更多，每次新增 JS 文件我們都需要手動在 HTML 中新增標籤，現在我們可以通過一個插件來自動完成這個功能。

然後修改配置文件。

執行 build 操作會發現同時生成了 HTML 文件，並且已經自動引入了 JS 文件。

按需載入代碼

在這一小節我們將學習如何按需載入代碼，在這之前的 vendor 入口我發現忘記加入 router 這個庫了，大家可以加入這個庫並且重新 build 下，會發現 bundle 只有不到 300KB 了。

現在我們的 bundle 文件包含了我們全部的自己代碼。但是當用戶訪問我們的首頁時，其實我們根本無需讓用戶載入除了首頁以外的代碼，這個優化我們可以通過路由的非同步載入來完成。

現在修改 src/router.js。

然後執行 build 命令，可以發現我們的 bundle 文件又瘦身了，並且新增了幾個文件。

將 HTML 文件在瀏覽器中打開，當點擊路由跳轉時，可以在開發者工具中的 Network 一欄中看到載入了一個 JS 文件。

首頁

自動刷新

每次更新代碼都需要執行依次 build，並且還要等上一會很麻煩，這一小節介紹如何使用自動刷新的功能。

首先安裝插件。

然後修改 packet.json 文件。

現在直接執行 npm run dev 可以發現瀏覽器自動打開了一個空的頁面，並且在命令行中也多了新的輸出。

等待編譯完成以後，修改 JS 或者 CSS 文件，可以發現 webpack 自動幫我們完成了編譯，並且只更新了需要更新的代碼。

但是每次重新刷新頁面對於 debug 來說很不友好，這時候就需要用到模塊熱替換了。但是因為項目中使用了 React，並且 Vue 或者其他框架都有自己的一套 hot-loader，所以這裡就略過了，有興趣的可以自己學習下。

生成生產環境代碼

現在我們可以將之前所學和一些新加的插件整合在一起，build 生產環境代碼。

修改 webpack 配置。

修改 packet.json 文件。

執行 npm run build。

可以看到我們在經歷了這麼多步以後，將 bundle 縮小到了只有 27.1KB，像 vendor 這種常用的庫我們一般可以使用 CDN 的方式外鏈進來。

5

補 充

webpack 配置上有些實用的小點在上文沒有提到，統一在這裡提一下。

6

後 記

如果你是跟著本文一個個步驟敲下來的，那麼大部分的 webpack 配置你應該都是可以看懂了，並且自己應該也知道如何去配置。謝謝大家看到這裡，這是本項目對應的倉庫，每個小節基本都對應了一次 commit。

文章較長，有錯誤也難免，如果你發現了任何問題或者我有任何錶述的不明白的地方，都可以留言給我。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！