webpack中的loader
webpack核心概念
Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。
Module：模塊，在 Webpack 里一切皆模塊，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack 會(huì)從配置的 Entry 開始遞歸找出所有依賴的模塊。
Chunk：代碼塊，一個(gè) Chunk 由多個(gè)模塊組合而成，用于代碼合并與分割。
Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。
Output：輸出結(jié)果，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。
context: context即是項(xiàng)目打包的路徑上下文，如果指定了context,那么entry和output都是相對(duì)于上下文路徑的，contex必須是一個(gè)絕對(duì)路徑
Webpack 啟動(dòng)后會(huì)從Entry里配置的Module開始遞歸解析 Entry 依賴的所有 Module。每找到一個(gè) Module， 就會(huì)根據(jù)配置的Loader去找出對(duì)應(yīng)的轉(zhuǎn)換規(guī)則，對(duì) Module 進(jìn)行轉(zhuǎn)換后，再解析出當(dāng)前 Module 依賴的 Module。這些模塊會(huì)以 Entry 為單位進(jìn)行分組，一個(gè) Entry 和其所有依賴的 Module 被分到一個(gè)組也就是一個(gè) Chunk。最后 Webpack 會(huì)把所有 Chunk 轉(zhuǎn)換成文件輸出。在整個(gè)流程中 Webpack 會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行 Plugin 里定義的邏輯。
loader的三種寫法
// 方法1module.exports = {module: {rules: [{test: /\.css/,loader: ['style-loader','css-loader']}]}}
// 方法2module.exports = {module: {rules: [{test: /\.css/,use: ['style-loader','css-loader']}]}}
// 方法3module.exports = {module: {rules: [{test: /\.css/,use: [{loader: 'style-loader',options: { insert:'top' } // 方便傳遞參數(shù)},'css-loader']}]}}
file-loader 可以指定要復(fù)制和放置資源文件的位置，以及如何使用版本哈希命名以獲得更好的緩存。此外，這意味著 你可以就近管理圖片文件，可以使用相對(duì)路徑而不用擔(dān)心部署時(shí) URL 的問題。使用正確的配置，webpack 將會(huì)在打包輸出中自動(dòng)重寫文件路徑為正確的 URL。
url-loader 允許你有條件地將文件轉(zhuǎn)換為內(nèi)聯(lián)的 base-64 URL (當(dāng)文件小于給定的閾值)，這會(huì)減少小文件的 HTTP 請(qǐng)求數(shù)。如果文件大于該閾值，會(huì)自動(dòng)的交給 file-loader 處理。
webpack5 新增 Asset Modules 資源模塊。
資源模塊(asset module)是一種模塊類型，它允許使用資源文件（字體，圖標(biāo)等）而無需配置額外 loader。
資源模塊類型(asset module type)，通過添加 4 種新的模塊類型，來替換所有這些 loader：
1、asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過使用 file-loader 實(shí)現(xiàn)。
2、asset/inline 導(dǎo)出一個(gè)資源的 data URI。之前通過使用 url-loader 實(shí)現(xiàn)。
3、asset/source 導(dǎo)出資源的源代碼。之前通過使用 raw-loader 實(shí)現(xiàn)。
4、asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。之前通過使用 url-loader，并且配置資源體積限制實(shí)現(xiàn)。