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 中需要引入的模塊代碼，這些代碼在包含在每個 requireimport 語句中。 當打包模塊時，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)