成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack如何查找模塊依賴

dmlllll / 1099人閱讀

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

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

絕對路徑

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

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

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

相對路徑

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

模塊路徑

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

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

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

resolve.extensions
用于指明程序自動補(bǔ)全識別哪些后綴。第一個是空字符串，對應(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 中涉及路徑配置最好使用絕對路徑，建議通過 path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式來配置，以兼容 Windows 環(huán)境。

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105630.html

相關(guān)文章

  • 什么是 Webpack？【Webpack Book 翻譯】

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

    tainzhi 評論0 收藏0

  • 理解webpack原理，手寫一個100行的webpack

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

    王偉廷 評論0 收藏0

  • 借助webpack對項目進(jìn)行分析優(yōu)化

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

    Me_Kun 評論0 收藏0

  • 如何提升VS Code擴(kuò)展的啟動速度——不只是Webpack

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

    xiaolinbang 評論0 收藏0

  • webpack 使用指南-緒論

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

    Nosee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<