Webpack Module Resolution學(xué)習(xí)

Module Resolution

文檔地址
通過指定絕對(duì)路徑來處理librariy以來。module可以作為以來從另外一個(gè)module引入。

import foo from 'path/to/module'
// or
require('path/to/module')

依賴module可以來自業(yè)務(wù)代碼或者第三方的library。
resolver幫助webpack查找每個(gè)通過require/import導(dǎo)入的代碼塊,并將這些依賴打包到bundle中。
webpack在構(gòu)建modules時(shí)使用enhanced-resolve來解決文件路徑的問題。

Resolving rules in webpoack

基于enhanced-resolve。webpack可以支持三種類型的文件路徑

  • Absolute path
import "/home/me/file";

import "C:\\Users\\me\\file";

使用絕對(duì)路徑,則不需要再設(shè)置其他的規(guī)則

  • Relative path
import "../src/file1";
import "./file2";

使用相對(duì)路徑,使用import or require引入的依賴會(huì)基于運(yùn)行環(huán)境的文件夾。
最終引入文件的路徑,基于引入文件路徑時(shí)的運(yùn)行環(huán)境而定,將運(yùn)行環(huán)境的路徑同相對(duì)路徑進(jìn)行拼接,生成絕對(duì)路徑。

  • Module path
import "module";
import "module/lib/file";

通過查找resolve.modules中配置的文件夾來查找依賴的module。
可以通過resolve.alias配置,使用alias替換原來module路徑。
當(dāng)基于上述規(guī)則解決了依賴,resolver會(huì)檢測制定的路徑是一個(gè)文件,還是一個(gè)文件夾。

如果是指向一個(gè)文件:

  • 如果path有文件擴(kuò)展名,則文件會(huì)被直接綁定使用。
  • 如果path沒有文件擴(kuò)展名,則查找的文件后綴會(huì)通過resolve.extensions配置來決定。
    resolve.extensions會(huì)讓resolver使用某個(gè)擴(kuò)展名(eg: .js ,.jsx)來解決依賴。

如果指向的是文件夾:
resolver會(huì)通過如下的步驟找到正確的文件

  • 如果文件夾中包含package.json。則會(huì)按照順序從resolve.mainFields配置的文件中進(jìn)行查找,
    package.json中第一個(gè)定義的文件路徑會(huì)作為查找結(jié)果。
  • 如果沒有package.json或者resolve.mainFields返回的路徑不可用,
    則會(huì)按照resolve.mainFields中定義的文件名在imported/required文件夾中按順序進(jìn)行查找。
  • 文件后綴會(huì)通過使用resolve.extensions配置來進(jìn)行查找。
    webpack會(huì)按照構(gòu)建對(duì)象使用合理的配置來解決以來。
    默認(rèn)配置

Resolving Loaders

loader以來的查找規(guī)則同文件查找規(guī)則一樣,但是resolveLoader可以單獨(dú)為loader進(jìn)行配置。

Caching

文件系統(tǒng)都是又緩存的,所以五羅并發(fā)或連續(xù)請(qǐng)求相同文件速度都會(huì)很快。
watch mode下,只有修改過的文件才會(huì)從緩存中被一處,如果未開啟watch模式,則緩存只會(huì)在重新編譯時(shí)被更新。
查看Resolve API來了解上述配置。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,502評(píng)論 19 139
  • 目錄第1章 webpack簡介 11.1 webpack是什么? 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,816評(píng)論 0 1
  • GitChat技術(shù)雜談 前言 本文較長,為了節(jié)省你的閱讀時(shí)間,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,867評(píng)論 7 110
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,443評(píng)論 0 21
  • publicPath指定了一個(gè)在瀏覽器中被引用的URL地址。 對(duì)于使用 和 加載器,當(dāng)文件路徑不同于他們的本地磁盤...
    飛呀飛哥閱讀 1,755評(píng)論 0 0

友情鏈接更多精彩內(nèi)容