資訊專(zhuān)欄INFORMATION COLUMN
摘要：依賴(lài)管理該條已在中文網(wǎng)存在，點(diǎn)擊這里表達(dá)式來(lái)調(diào)用當(dāng)你的請(qǐng)求包含表達(dá)式，那個(gè)一個(gè)上下文環(huán)境將被創(chuàng)建。一個(gè)包含所有父文件夾和子及后代文件夾中以結(jié)尾的文件的上下文。一個(gè)函數(shù)，返回一個(gè)數(shù)組，包含上下文模塊能夠處理的所有的請(qǐng)求。
依賴(lài)管理 Dependency Management
該條已在webpack2.x中文網(wǎng)存在，點(diǎn)擊這里
es6 modules commonjs amd表達(dá)式來(lái)調(diào)用 require with expression
當(dāng)你的請(qǐng)求包含表達(dá)式，那個(gè)一個(gè)上下文環(huán)境將被創(chuàng)建。這個(gè)需要的模塊被編譯的時(shí)候是未知的。
例子：
require("./template/" + name + ".ejs");
webpack 解析require語(yǔ)句，并且摘出一些信息：
Directory: ./template Regular expression: /^.*.ejs$/上下文模塊 context modules
一個(gè)上下文模塊(context module)被生成之后，它包含目錄模塊的所有引用，并且能夠被一個(gè)相匹配的正則表達(dá)式調(diào)用。
上下文模塊包含一個(gè)map，能夠把請(qǐng)求翻譯成模塊的id。
例子：
{
"./table.ejs": 42,
"./table-row.ejs": 43,
"./directory/folder.ejs": 44
}
上下文模塊(context module)也包含一些運(yùn)行時(shí)邏輯(runtime logic)--可以訪(fǎng)問(wèn)到map。
這意味著支持一步調(diào)用，但是這也會(huì)導(dǎo)致所有相關(guān)的模塊將被包含在bundle（被編譯后的文件）中。
require.context你可以創(chuàng)建自己的上下文，通過(guò)使用require.context方法（函數(shù)）。
它允許傳遞一個(gè)路徑，正則表達(dá)式和一個(gè)標(biāo)記——如果子目錄允許被搜索匹配的話(huà)。
webpack 在這個(gè)上下文模塊被創(chuàng)建的時(shí)候解析require.context()函數(shù)。
語(yǔ)法如下：
require.context(directory, useSubdirectories = false, regExp = /^.//)
例子：
require.context("./
", false, /.test.js$/);
// test文件中所有的以`test.js`結(jié)尾的文件將能夠被調(diào)用，這就是該語(yǔ)句創(chuàng)建的上下文環(huán)境。
require.context("../", true, /.stories.js$/);
// 一個(gè)包含所有父文件夾和子及后代文件夾中以`.stories.js結(jié)尾的文件的上下文。
context module API
一個(gè)上下文模塊(context module)導(dǎo)出一個(gè)（require）函數(shù)，它包含一個(gè)參數(shù)——一個(gè)請(qǐng)求。
這個(gè)函數(shù)有三個(gè)屬性:resolve, keys, id.
resovle 一個(gè)函數(shù)，返回請(qǐng)求模塊的id。
keys 一個(gè)函數(shù)，返回一個(gè)數(shù)組，包含上下文模塊能夠處理的所有的請(qǐng)求。
這個(gè)在你想要調(diào)用匹配到的所有的文件時(shí)很有用，例如：
function importAll (r) {
r.keys().forEach(r);
}
importAll(require.context("../components/", true, /.js$/));
var cache = {};
function importAll (r) {
r.keys().forEach(key => cache[key] = r(key));
}
importAll(require.context("../components/", true, /.js$/));
// At build-time cache will be polulated with all required modules.
id 是指上下文模塊的id，這個(gè)也許在module.hot.accept中很有用。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81847.html
摘要：瀏覽器需要重新下載打包后的文件，即使文件的絕大部分都沒(méi)有變化。分離并且以來(lái)命名新的入口能夠緩和當(dāng)前的問(wèn)題?，F(xiàn)在運(yùn)行綁定的檢查結(jié)果是只是被綁定到這個(gè)綁定文件中。 分離庫(kù)代碼Code Splitting - Libraries 這個(gè)在webpack2.x中文網(wǎng)已存在，點(diǎn)擊這里 讓我們想一個(gè)簡(jiǎn)單的應(yīng)用——momentjs，他是一個(gè)事件格式化的庫(kù)。安裝moment. npm install -...
摘要：下載完成之后你可以這樣啟動(dòng)它如果控制臺(tái)提醒這個(gè)指令無(wú)效，可以嘗試最好的方法是在中添加命令如下上述命令會(huì)使瀏覽器自動(dòng)打開(kāi)到地址。下載完成，如下使用。 開(kāi)發(fā)Development 在這篇中我們將說(shuō)明怎樣開(kāi)始開(kāi)發(fā)，以及增從三個(gè)工具中擇一進(jìn)行開(kāi)發(fā)。假使你已經(jīng)設(shè)置了webpack.config.js設(shè)置文件。 該文檔已在webpack2.x中存在，點(diǎn)擊這里 永遠(yuǎn)不要再生產(chǎn)產(chǎn)品中使用這些工具，絕對(duì)...
摘要：公開(kāi)路徑該條已在中文網(wǎng)存在點(diǎn)擊這里有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。使用案例這里有有些實(shí)際應(yīng)用中的案例，其中它使用的非常靈活。 公開(kāi)路徑(pbulic path) 該條已在webpack2.x中文網(wǎng)存在,點(diǎn)擊這里 webpack有一個(gè)非常有用的設(shè)置，允許你設(shè)置一個(gè)所有資源的基礎(chǔ)路徑在你的應(yīng)用中。它叫做publicPath。 使用案例(Use cases...
摘要：出口影響編譯的輸出告訴怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。該選項(xiàng)實(shí)現(xiàn)跨域加載模塊可以的值是命名每個(gè)出口文件。不必明確絕對(duì)路徑。使用設(shè)置項(xiàng)，設(shè)置具體位置。僅僅命名文件名字即可。 出口Output 影響編譯的輸出告訴webpack怎樣編譯輸出的文件允許多個(gè)入口一個(gè)出口的情況。 用法 const config = { output: bundle.js }; module.e...
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢(xún)等中文指南是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。 nodejs 入門(mén) nodejs 入門(mén)教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線(xiàn)上部署與運(yùn)維 說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...
閱讀 1784·2021-11-22 09:34
閱讀 1775·2019-08-29 16:36
閱讀 2774·2019-08-29 15:43
閱讀 3205·2019-08-29 13:57
閱讀 1371·2019-08-28 18:05
閱讀 1974·2019-08-26 18:26
閱讀 3321·2019-08-26 10:39
閱讀 3531·2019-08-23 18:40
