Webpack 2 快速入門

在 Webpack 2 的文檔 完成之後，就會推出 Webpack 2 的 beta 版本, 但這並不意味著你知道怎麼配置 Webpack 2, 卻不能在項目中使用 Webpack 2.

什麼是 Webpack

簡單來說, Webpack 是一個針對 JavaScript 的打包工具. 然而, 隨著 Webpack 日漸流行, 它逐漸演變成了前端代碼的管理工具(不論是人為故意還是社區推動的).

之前的任務管理方式是: HTML文件、樣式和JavaScript是各自獨立的, 你必須分開地管理每一個文件, 並確保一切能正常運行.

類似Gulp的任務管理工具能處理多個不同的預處理器和編譯器, 但是在所有情況下, 這都是將一個文件作為源輸入, 經過處理後輸出編譯後的文件. 然而, Gulp 完成這些工作就像是一個任務接一個任務進行的, 沒有從系統(或全局)的角度考慮如何完成任務的輸入和輸出. 這成了開發者的負擔: 在生產環境下, 開發者需要找到任務結束的地方, 並通過合理地方式將所有的任務有序地組裝在一起.

而Webpack則嘗試詢問一個大膽的問題來減輕開發者的負擔: 假如在開發過程中的某一個部分能處理其所有的依賴會怎麼樣呢? 假如我們可以簡單地用某種方式去寫代碼, 而構建程序去管理最終所必需使用到的代碼又會怎麼樣呢?

Webpack的方式是: 如果webpack知道依賴的資源, 它就會將項目實際用到的資源構建到生產環境中.

如果過去幾年你都混跡在 web 社區中, 你應該知道解決這個問題的更好方式是: 用 JavaScript 去構建. 而 Webpack 嘗試通過JavaScript來解析依賴, 讓構建過程變得更加簡單. 但僅用於管理代碼並不是Webpack設計的厲害之處, 其厲害之處在於Webpack的任務管路方式 100% 由JavaScript來完成的(利用了 Node 特性). Webpack 使你在寫 JavaScript 時, 有能力從(項目的)全局角度掌控和把握整個項目.

換句話說: 你不是為Webpack寫代碼, 而是為你的項目寫代碼. 同時, webpack會自動運行(當然, 你需要寫一些配置文件).

簡而言之, 如果你曾經糾結過下面的任何一個問題:

那麼, 你會從Webpack中收益, 因為 Webpack 能輕易地處理上述問題, 它會通過 JavaScript 來管理模塊依賴和載入順序而不是你的開發頭腦. 此外, Webpack 能在服務端運行, 這意味著你能創建漸進增強的網站.

第一步

在這篇文章中, 我們將使用Yarn(brew install yarn)而不是npm, 但這完全取決於你, 因為它們做的是同樣的事. 在項目目錄, 將運行下面的命令將 Webpack 2 添加到全局和本地項目中:

注意:是指你的項目根目錄.

還記得 Webpack 是怎麼知道項目如何運行的嗎? 它是通過讀取你的代碼來獲知這一信息的. Webpack 的工作流如下:

1.從文件夾開始

2.查找對應的文件

3.(找到文件之後)讀取文件內容. 每當遇到 import (ES6) 或者 require() （Node） 依賴項時, 它會解析這些代碼, 並且打包到最終構建里. 接著它會不斷遞歸搜索實際需要的依賴項, 直到它到達了「樹」的底部.

4.遞歸完所有依賴之後, Webpack 會將所有東西打包到 output.path 對應的目錄, 並將 output.filename 的值作為最終的資源名([name] 表示使用 entry 項的 key).

(在項目的根目錄下)運行:

p 表示』生產』模式, 輸出文件會被 混淆/壓縮.

運行命令之後, 同時在控制台輸出當前日期. 需要注意的是, Webpack 會自動找到 moment 的指向(即使你有一個 moment.js 存在於目錄中, 但 Webpack 默認會優先去尋找 moment 的Node模塊).

多文件

你可以修改 entry 對象, 指定任意數量的入口文件和輸出文件.

多個(入口)文件一起打包

多個(入口)文件, 多個輸出(文件)

自動打包

如果你將應用分開打包到多個 output 文件里(如果你的應用有非常多的 JavaScript 文件不需要在前期載入, 這樣做是非常有效的), 有可能會出現很多冗餘的代碼, 因為 Webpack 是獨立解析每個文件的依賴的. 幸運的是, Webpack 已經內置了 CommonsChunk 插件來處理這個問題:

加上 CommonsChunk 插件後, 任何一個模塊在你的 output 文件中被載入 2 次(該值由 minChunks 設置)及以上, 該模塊就會被打包在 common.js 中, 你可以在客戶端緩存這些模塊. 雖然這會增加額外的請求, 但這能防止客戶端多次下載同一個模塊.

開發環境

在 src 目錄下創建一個帶如下標籤的 index.html 文件:

在終端運行如下命令:

全局方法調用

需要使用在全局作用域下的函數? 只需在 output.library 進行簡單的設置就行:

它會把你的打包文件捆綁在 window.myClassName 實例上. 設置了作用域之後, 你可以在文件的入口處進行調用(更多設置可以查閱文檔).

Loaders

到目前為止, 我只介紹了怎麼使用 Webpack 處理 JavaScript 文件. 從處理 JavaScript 文件開始是非常重要的, 因為這是 Webpack 唯一能識別的語言. 實際上, Webpack 可以使用 Loaders 來處理各種通過 JavaScript 傳遞的任何類型的文件.

loader 可以是像 Sass 這樣的預處理器, 也可以是像 Babel 這樣的編譯器. 在 NPM 里, 它們通常被命名為 *-loader, 例如: sass-loader 或者 babel-loader.

Babel+ES6

如果你想在項目里通過 Babel 使用 ES6, 首先需要安裝合適的loader來編譯 es6:

Webpack 1.x 的用戶需要注意: Loaders 的核心理念和Webpack 2是保持一致的, 但是它的語法在Webpack 2中有所改善. 最終準確的語法需要等到 Webpack 2的文檔完成之後才知道.

正則表達式會去搜索任何後綴的文件, 然後通過 Babel 來載入這些文件. Webpack 依賴正則表達式來給你(對文件處理的)完全控制權—它不會限制你需要處理的文件擴展或者讓你按照一定的方式來組織代碼. 例如: 可能目錄下的文件不是 ES6 寫的, 你可以修改上面的 test 欄位為, 這樣就能排除指定的文件目錄里的js文件, 剩餘的(js文件)則由 Babel 處理.

CSS+Style Loader

如果你的應用只需要載入 CSS, Webpack 也能滿足需要. 創建一個 index.js 文件, 然後引入需要的 CSS 文件:

然後會報錯: You may need an appropriate loader to handle this file type. 在上文說過, Webpack 僅能識別 JavaScript. 因此, 需要安裝合適的loader來處理 CSS 文件:

Loaders會按照數組的逆序運行, 也就是說, 會先運行 css-loader, 後運行 style-loader.

你可能會注意到, 在生產環境下, CSS 會被打包到 JavaScript 文件里, style-loader 則會把樣式寫在 style 標籤中. 此外, Webpack 通過將這些文件打包成一個文件來自動地解析所有的 @import 查詢(而不是依賴 CSS 的默認 import 功能, 這會導致額外的 header 請求, 並且載入資源非常慢).

從 JavaScript 中載入 CSS 是非常神奇的, 因為這樣你可以用新的方式將 CSS 模塊化. 也就是說, 可以僅通過 button.js 來載入 button.css, 這意味著如果 button.js 沒有用到, 其對應的 CSS 也不會被構建到生產環境中.

CSS+Node 模塊

我們可以使用 Webpack 里的 ~ 前綴來引入 Node 模塊. 假如我們執行了 yarn add normalize.css, 那麼就可以這麼用:

這樣就可以充分利用 NPM 管理第三方樣式庫的優點—版本更新和避免複製和粘貼. 更近一步, 和 CSS 默認的 import 功能相比, 用 Webpack 打包 CSS 有明顯的優勢, 因為它可以為客戶端減少頭部請求以及緩慢的載入時間.

CSS 模塊

你可能已經聽過 CSS 模塊. 如果你通過 JavaScript 來構建 DOM 節點, 它能運行的很好. 從本質上來說, 它將你的CSS類擴展到載入它的JavaScript文件中了(了解更多).

如果你要使用 CSS模塊, 可以用 css-loader 來打包 CSS 文件(yarn add –dev css-loader):

首先指定了源文件目錄, 然後添加了 node_modules 目錄. 這樣, Webpack 在查找模塊時, 會首先從源目錄開始查找, (如果沒找到)然後從已安裝的 Node 模塊中查找(你使用時, 要分別將 「src」 和 「node_modules」 目錄替換成你的項目的源目錄和Node模塊目錄).

Sass

需要Sass? 沒問題, 首先安裝loader:

然後加一條規則:

這樣你就能在 JavaScript 文件里通過 import 來引用 .scss 或者 .sass 文件, 剩下的事情交給 Webpack 來處理.

將 CSS 分開打包

你可能需要處理漸進增強的情況, 也可能因某些原因需要分離 CSS 文件. 這個也很簡單, 只需將配置文件中的 style-loader 用 extract-text-webpack-plugin 代替就行. 例如:

在本地安裝該插件(需要安裝2016年10月的Beta版本):

然後修改下配置文件:

運行 webpack -p 之後, 你會發現在 output 指定的目錄中會有一個 app.bundle.css 文件. 最後, 在 HTML 文件中通過標籤正常引用.

用模塊化的方式思考

為了最大程度的使用 Webpack, 你必須用模塊化、可復用性以及可獨立處理的思維方式去思考, 讓每個模塊把各自負責的事情做好. 這意味著類似下面這樣的文件:

會變成這樣:

最後編譯的結果是非常簡潔且可復用的代碼. 每個獨立的組件通過 import 來引入依賴, 再通過 export 來暴露公共介面給其他模塊. Babel + ES6就提供了上述特性, 並且你可以使用 JavaScript Classes 來實現更好的模塊化, 而且不需要考慮運行作用域.

作者：dwqs

點擊展開全文

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