webpack如何查找模塊依賴

dmlllll 發(fā)布于2019-08-23 18:39 / 1165人閱讀

摘要：此時(shí)會(huì)首先檢查參數(shù)目標(biāo)是否為目錄，如果是目錄，則檢查的字段。會(huì)在配置文件中的所有查找目錄中查找。對(duì)于復(fù)雜的模塊路徑，還可以設(shè)置別名。帶表達(dá)式的語(yǔ)句如果含有表達(dá)式，會(huì)創(chuàng)建一個(gè)上下文，因?yàn)樵诰幾g時(shí)并不清楚具體是哪一個(gè)模塊被導(dǎo)入。

【01】Webpack的文件加載分為三種：

絕對(duì)路徑

比如require("/home/me/file")。
此時(shí)會(huì)首先檢查參數(shù)目標(biāo)是否為目錄，如果是目錄，則檢查package.json的main字段。

如果沒(méi)有package.json或者沒(méi)有main字段，則會(huì)用index作為文件名。

經(jīng)過(guò)上述過(guò)程，解析到一個(gè)絕對(duì)路徑的文件名，然后會(huì)嘗試為其加上擴(kuò)展名（擴(kuò)展名可在webpack.config.js中設(shè)置），第一個(gè)存在的文件作為最終的結(jié)果。

相對(duì)路徑

比如require("./file")。使用當(dāng)前路徑或配置文件中的context作為相對(duì)路徑的目錄。加載過(guò)程和絕對(duì)路徑相似。

模塊路徑

如require("module/lib/file")。會(huì)在配置文件中的所有查找目錄中查找。

對(duì)于復(fù)雜的模塊路徑，還可以設(shè)置別名(resolve.alias)。

一個(gè)路徑解析配置的例子：

resolve.extensions
用于指明程序自動(dòng)補(bǔ)全識(shí)別哪些后綴。第一個(gè)是空字符串，對(duì)應(yīng)不需要后綴的情況。

module.exports = {
    resolve: {
        root: [appRoot, nodeRoot, bowerRoot],
        modulesDirectories: [appModuleRoot], 
        alias: {
            "angular": "angular/angular",
            "lodash": "lodash/dist/lodash"
        },
        extensions: ["", ".js", ".coffee", ".html", ".css", ".scss"]
    }
}

Webpack 中涉及路徑配置最好使用絕對(duì)路徑，建議通過(guò) path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式來(lái)配置，以兼容 Windows 環(huán)境。

帶表達(dá)式的 require 語(yǔ)句

如果request 含有表達(dá)式(expressions)，會(huì)創(chuàng)建一個(gè)上下文(context)，因?yàn)樵诰幾g時(shí)(compile time)并不清楚具體是哪一個(gè)模塊被導(dǎo)入。
示例：
require("./template/" + name + ".ejs");
webpack 解析 require() 的調(diào)用，提取出來(lái)如下這些信息：
Directory: ./template
Regular expression: /^.*.ejs$/

GPU云服務(wù)器云服務(wù)器依賴模塊模塊依賴 linux模塊依賴 php如何查找頂級(jí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105630.html

相關(guān)文章

什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個(gè)包的名稱注入一個(gè)哈希值例如，，以便在版本更新后使客戶端上舊版本的包無(wú)效重新下載。如此受人喜愛(ài)的原因之一是熱模塊更換?？梢詾槲募晒Ｖ担趦?nèi)容更改時(shí)，可以作廢瀏覽器緩存中上個(gè)版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計(jì)劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評(píng)論0 收藏0
理解webpack原理，手寫(xiě)一個(gè)100行的webpack

摘要：什么是可以引用官網(wǎng)的一幅圖解釋，我們可以看到，可以分析各個(gè)模塊的依賴關(guān)系，最終打包成我們常見(jiàn)的靜態(tài)文件，。我們暫時(shí)把通過(guò)傳文件路徑能返回文件信息的這個(gè)函數(shù)叫。什么是webpack 可以引用官網(wǎng)的一幅圖解釋，我們可以看到webpack，可以分析各個(gè)模塊的依賴關(guān)系，最終打包成我們常見(jiàn)的靜態(tài)文件，.js 、 .css 、 .jpg 、.png。今天我們先不弄那么復(fù)雜，我們就介紹webpac...

王偉廷 2019-08-23 15:38 評(píng)論0 收藏0
借助webpack對(duì)項(xiàng)目進(jìn)行分析優(yōu)化

摘要：由于項(xiàng)目的不斷擴(kuò)大，只會(huì)影響我們定位功能和問(wèn)題的速度，因此對(duì)冗余文件進(jìn)行清理，是很重要的。我們?cè)陧?xiàng)目中使用的，自動(dòng)將各個(gè)圖標(biāo)進(jìn)行。進(jìn)入公司之后，接手的便是前人留下來(lái)的一個(gè)大項(xiàng)目。慶幸的是整個(gè)項(xiàng)目擁有完善的產(chǎn)品功能文檔，但是由于項(xiàng)目過(guò)于龐大，老舊。包含了打包過(guò)慢，冗余文件過(guò)多等諸多問(wèn)題。想要快速的解決這些問(wèn)題，想要完全把功能重構(gòu)一遍的話，成本太高了。一個(gè)一個(gè)文件來(lái)過(guò)，時(shí)間成本也比較大。...

Me_Kun 2019-08-22 16:17 評(píng)論0 收藏0
如何提升VS Code擴(kuò)展的啟動(dòng)速度——不只是Webpack

摘要：同時(shí)它又需要監(jiān)聽(tīng)事件，當(dāng)物聯(lián)網(wǎng)設(shè)備插入計(jì)算機(jī)后做出響應(yīng)。比如以熱啟動(dòng)打開(kāi)物聯(lián)網(wǎng)項(xiàng)目工作區(qū)的啟動(dòng)時(shí)間在表中是毫秒，但是正在運(yùn)行的擴(kuò)展頁(yè)面中大約是毫秒。當(dāng)在中應(yīng)用懶加載時(shí)，無(wú)論是否使用打包模塊，沒(méi)有工作區(qū)時(shí)啟動(dòng)速度都遠(yuǎn)快于打開(kāi)物聯(lián)網(wǎng)工作區(qū)。概述擴(kuò)展可以讓用戶在VS Code中向開(kāi)發(fā)工作流程添加新的語(yǔ)言、調(diào)試器和工具。VS Code提供了豐富的可擴(kuò)展模塊，允許擴(kuò)展訪問(wèn)用戶界面、提供擴(kuò)展功...

xiaolinbang 2019-08-26 13:47 評(píng)論0 收藏0
webpack 使用指南-緒論

摘要：在講解之前先回顧一下筆者在項(xiàng)目開(kāi)發(fā)中的工作流變化時(shí)代此時(shí)工作流大致為結(jié)合插件處理視圖處理樣式等庫(kù)此時(shí)由于依賴少手動(dòng)引入各種標(biāo)簽結(jié)合調(diào)試界面時(shí)代利用指令服務(wù)控制器將邏輯拆分為多個(gè)文件利用編譯會(huì)將分為全局樣式和組件樣式下載各種依賴此時(shí)任需要手動(dòng) 在講解 webpack 之前先回顧一下筆者在項(xiàng)目開(kāi)發(fā)中的工作流變化. jquery 時(shí)代此時(shí)工作流大致為 jquery 結(jié)合插件處理視圖 bo...

Nosee 2019-08-21 17:38 評(píng)論0 收藏0