webpack如何查找模塊依賴

dmlllll 發布于2019-08-23 18:39 / 1071人閱讀

摘要：此時會首先檢查參數目標是否為目錄，如果是目錄，則檢查的字段。會在配置文件中的所有查找目錄中查找。對于復雜的模塊路徑，還可以設置別名。帶表達式的語句如果含有表達式，會創建一個上下文，因為在編譯時并不清楚具體是哪一個模塊被導入。

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

絕對路徑

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

如果沒有package.json或者沒有main字段，則會用index作為文件名。

經過上述過程，解析到一個絕對路徑的文件名，然后會嘗試為其加上擴展名（擴展名可在webpack.config.js中設置），第一個存在的文件作為最終的結果。

相對路徑

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

模塊路徑

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

對于復雜的模塊路徑，還可以設置別名(resolve.alias)。

一個路徑解析配置的例子：

resolve.extensions
用于指明程序自動補全識別哪些后綴。第一個是空字符串，對應不需要后綴的情況。

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

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

帶表達式的 require 語句

如果request 含有表達式(expressions)，會創建一個上下文(context)，因為在編譯時(compile time)并不清楚具體是哪一個模塊被導入。
示例：
require("./template/" + name + ".ejs");
webpack 解析 require() 的調用，提取出來如下這些信息：
Directory: ./template
Regular expression: /^.*.ejs$/

云服務器 GPU云服務器依賴模塊模塊依賴 linux模塊依賴 php如何查找頂級

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105630.html

什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值，在內容更改時，可以作廢瀏覽器緩存中上個版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評論0 收藏0
理解webpack原理，手寫一個100行的webpack

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

王偉廷 2019-08-23 15:38 評論0 收藏0
借助webpack對項目進行分析優化

摘要：由于項目的不斷擴大，只會影響我們定位功能和問題的速度，因此對冗余文件進行清理，是很重要的。我們在項目中使用的，自動將各個圖標進行。進入公司之后，接手的便是前人留下來的一個大項目。慶幸的是整個項目擁有完善的產品功能文檔，但是由于項目過于龐大，老舊。包含了打包過慢，冗余文件過多等諸多問題。想要快速的解決這些問題，想要完全把功能重構一遍的話，成本太高了。一個一個文件來過，時間成本也比較大。...

Me_Kun 2019-08-22 16:17 評論0 收藏0
如何提升VS Code擴展的啟動速度——不只是Webpack

摘要：同時它又需要監聽事件，當物聯網設備插入計算機后做出響應。比如以熱啟動打開物聯網項目工作區的啟動時間在表中是毫秒，但是正在運行的擴展頁面中大約是毫秒。當在中應用懶加載時，無論是否使用打包模塊，沒有工作區時啟動速度都遠快于打開物聯網工作區。概述擴展可以讓用戶在VS Code中向開發工作流程添加新的語言、調試器和工具。VS Code提供了豐富的可擴展模塊，允許擴展訪問用戶界面、提供擴展功...

xiaolinbang 2019-08-26 13:47 評論0 收藏0
webpack 使用指南-緒論

摘要：在講解之前先回顧一下筆者在項目開發中的工作流變化時代此時工作流大致為結合插件處理視圖處理樣式等庫此時由于依賴少手動引入各種標簽結合調試界面時代利用指令服務控制器將邏輯拆分為多個文件利用編譯會將分為全局樣式和組件樣式下載各種依賴此時任需要手動在講解 webpack 之前先回顧一下筆者在項目開發中的工作流變化. jquery 時代此時工作流大致為 jquery 結合插件處理視圖 bo...

Nosee 2019-08-21 17:38 評論0 收藏0