webpack學習之——模塊(Modules)
在模塊化編程中,開發者將程序分解成離散功能塊(discrete chunks of functionality),並稱之為模塊。
每個模塊具有比完整程序更小的接觸面,使得校驗、調試、測試輕而易舉。 精心編寫的模塊提供了可靠的抽象和封裝界限,使得應用程序中每個模塊都具有條理清楚的設計和明確的目的。
什麽是 webpack 模塊
對比 Node.js 模塊,webpack 模塊能夠以各種方式表達它們的依賴關系,幾個例子如下:
- ES2015
import
語句; - CommonJS
require()
語句; - AMD
define
和require
語句; - css/sass/less 文件中的
@import
- 樣式(
url(...)
)或 HTML 文件(<img src=...>
)中的圖片鏈接(image url)
支持的模塊類型
webpack 通過 loader 可以支持各種語言和預處理器編寫模塊。loader 描述了 webpack 如何處理 非 JavaScript(non-JavaScript) 模塊,並且在bundle中引入這些依賴。 webpack 社區已經為各種流行語言和語言處理器構建了 loader,包括:
- CoffeeScript
- TypeScript
- ESNext (Babel)
- Sass
- Less
- Stylus
總的來說,webpack 提供了可定制的、強大和豐富的 API,允許任何技術棧使用 webpack,保持了在你的開發、測試和生成流程中無侵入性(non-opinionated)。
模塊解析(Module Resolution)
resolver 是一個庫(library),用於幫助找到模塊的絕對路徑。一個模塊可以作為另一個模塊的依賴模塊,然後被後者引用,如下:
所依賴的模塊可以是來自應用程序代碼或第三方的庫(a third party library)。resolver 幫助 webpack 找到 bundle 中需要引入的模塊代碼,這些代碼在包含在每個 require
import
語句中。 當打包模塊時,webpack
使用 enhanced-resolve 來解析文件路徑
webpack 中的解析規則
使用 enhanced-resolve
,webpack 能夠解析三種文件路徑:
絕對路徑
由於我們已經取得文件的絕對路徑,因此不需要進一步再做解析。
相對路徑
在這種情況下,使用 import
或 require
的資源文件(resource file)所在的目錄被認為是上下文目錄(context directory)。在 import/require
中給定的相對路徑,會添加此上下文路徑(context path),以產生模塊的絕對路徑(absolute path)。
模塊路徑
模塊將在 resolve.modules
中指定的所有目錄內搜索。 你可以替換初始模塊路徑,此替換路徑通過使用 resolve.alias
配置選項來創建一個別名。
一旦根據上述規則解析路徑後,解析器(resolver)將檢查路徑是否指向文件或目錄。如果路徑指向一個文件:
- 如果路徑具有文件擴展名,則被直接將文件打包。
- 否則,將使用 [
resolve.extensions
] 選項作為文件擴展名來解析,此選項告訴解析器在解析中能夠接受哪些擴展名(例如.js
,.jsx
)。
如果路徑指向一個文件夾,則采取以下步驟找到具有正確擴展名的正確文件:
- 如果文件夾中包含
package.json
文件,則按照順序查找resolve.mainFields
配置選項中指定的字段。並且package.json
中的第一個這樣的字段確定文件路徑。 - 如果
package.json
文件不存在或者package.json
文件中的 main 字段沒有返回一個有效路徑,則按照順序查找resolve.mainFiles
配置選項中指定的文件名,看是否能在 import/require 目錄下匹配到一個存在的文件名。 - 文件擴展名通過
resolve.extensions
選項采用類似的方法進行解析。
webpack 根據構建目標(build target)為這些選項提供了合理的默認配置。
緩存
每個文件系統訪問都被緩存,以便更快觸發對同一文件的多個並行或串行請求。在觀察模式下,只有修改過的文件會從緩存中摘出。如果關閉觀察模式,在每次編譯前清理緩存。
webpack學習之——模塊(Modules)