webpack loader實現

来源:https://www.cnblogs.com/hashtang/archive/2019/10/13/11666815.html
-Advertisement-
Play Games

正值前端組件化開發時代,那麼必然離不開目前最火的構建工具——webpack(grunt,gulp等暫且不談)。說到這裡,剛好有幾個問題: 為什麼運行打包命令之後, 文件可以轉成 文件 為什麼運行打包命令之後, 文件可以轉成 文件 為什麼運行打包命令之後, 語法可以轉成 語法 "[外鏈圖片轉存失敗,源 ...


正值前端組件化開發時代,那麼必然離不開目前最火的構建工具——webpack(grunt,gulp等暫且不談)。說到這裡,剛好有幾個問題:
  • 為什麼運行打包命令之後,.vue 文件可以轉成 .js 文件
  • 為什麼運行打包命令之後,.less 文件可以轉成 .css 文件
  • 為什麼運行打包命令之後,ES6+ 語法可以轉成 ES5 語法
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mr86zPPH-1570953160209)(https://img.shields.io/npm/v/vue-hash-calendar.svg)]

    上面這幾個問題,就引出了我們的主角——【loader】。
    loaderwebpack 的一塊很重要的組成部分。我們都知道 webpack 是用於資源打包的,裡面的所有資源都是“模塊”,內部實現了對模塊資源進行載入的機制。但是 Webpack 本身只能處理 js 模塊,如果要處理其他類型的文件,就需要使用 loader 進行轉換。 Loader 可以理解為是模塊和資源的轉換器,它本身是一個函數,接收文件源碼作為參數,返迴轉換的結果,例如可以使用 loader 載入器可以快速編譯預處理器 (less,sass,coffeeScript)Loader 可以在 require() 引用模塊的時候添加,也可以在 webpack 全局配置中進行綁定,還可以通過命令行的方式使用。(本篇中的參數配置及使用方式均基於 webpack4.0 版本)

一、loader的特點

1、loader 的執行順序和代碼書寫的順序是相反的,即:從下至上,從右至左。
2、第一個執行的 loader 會接收源文件做為參數,下一次執行的 loader 會接收前一個 loader 執行的返回值做為參數
3、需要嚴格遵循“單一職責”原則,即每個 loader 只負責自己需要負責的事情

二、loader API

methods 含義
this.request 被解析出來的 request 字元串。例子:"/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr"
this.loaders 所有 loader 組成的數組。它在 pitch 階段的時候是可以寫入的。
this.loaderIndex 當前 loader 在 loader 數組中的索引。
this.async 告訴 loader-runner 這個 loader 將會非同步地回調
this.callback 一個可以同步或者非同步調用的可以返回多個結果的函數
this.data 在 pitch 階段和正常階段之間共用的 data 對象。
this.cacheable 設置是否可緩存標誌的函數
this.resource request 中的資源部分,包括 query 參數
this.resourcePath 資源文件的路徑。
this.resourceQuery 資源的 query 參數
this.target 編譯的目標。從配置選項中傳遞過來的。
this.webpack 如果是由 webpack 編譯的,這個布爾值會被設置為真
this.sourceMap 應該生成一個 source map。因為生成 source map 可能會非常耗時,你應該確認 source map 確實有必要請求。
this.emitWarning 發出一個警告。
this.emitError 發出一個錯誤。
this.loadModule 解析給定的 request 到一個模塊,應用所有配置的 loader ,並且在回調函數中傳入生成的 source 、sourceMap 和 模塊實例(通常是 NormalModule 的一個實例)。如果你需要獲取其他模塊的源代碼來生成結果的話,你可以使用這個函數。
this.resolve 像 require 表達式一樣解析一個 request 。
this.emitFile 產生一個文件。這是 webpack 特有的。
this.fs 用於訪問 compilation 的 inputFileSystem 屬性。
this.value 向下一個 loader 傳值。如果你知道了作為模塊執行後的結果,請在這裡賦值(以單元素數組的形式)。
this.inputValue 從上一個 loader 那裡傳遞過來的值。如果你會以模塊的方式處理輸入參數,建議預先讀入這個變數(為了性能因素)。
更多詳細API,以及各API的用法示例,可以訪問官網查看。地址:https://www.webpackjs.com/api/loaders

三、寫loader之前的需求整理

現在有這樣一個需求,使用 hxkj-loader 載入並處理名稱為 *.hxkj.vip 的文件,將裡面的哈希空間全部替換為 www.hxkj.vip。需要實現的轉換如下:

轉換前的內容:

<div>
    <h1>歡迎訪問哈希空間</h1>
    <p>哎喲,終於等到你。這裡就是讓人流連忘返的哈希空間呀!</p>
</div>

轉換後的內容:

<div>
    <h1>歡迎訪問www.hxkj.vip</h1>
    <p>哎喲,終於等到你。這裡就是讓人流連忘返的www.hxkj.vip呀!</p>
</div>

四、編寫loader

在與 webpack.config.js 同級目錄下新建 hxkj-loader.js,文件的內容如下:

module.exports = function(source){
    var content="";
    content = source.replace("/哈希空間/g","www.hxkj.vip");
    return content; 
}

接下來,需要在 webpack.config.js 文件中增加以下的配置:

const path = require("path"); // 引入 node 的 path 模塊
...
module:{
    rules:[{
        test: /\.hxkj\.vip$/, // 正則匹配以 hxkj.vip 結尾的文件
        use:[{
            loader:path.resolve(__dirname, "hxkj-loader") // 使用 path 模塊找到 hxkj-loader 的路徑
        }]
    }]
}
好,到此,一個簡易版的 loader 就已經寫完了。目前 loader 是直接寫在本地的,可以考慮將自己寫好的 loader 發佈到 npm,這樣就更加完善了。

At last,看完之後有什麼不懂的,可以留言反饋。

轉載請註明出處:https://www.jianshu.com/p/51b793f6fa0e
作者:TSY
個人空間:https://hxkj.vip


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS介紹 CSS( C ascading S tyle S heet,層疊樣式表)定義 如何顯示 HTML元素。 當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化(渲染)。 CSS語法 CSS實例 每個CSS樣式由兩個組成部分:選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號 ...
  • 塊級元素:獨占一行,對寬高的屬性值生效;如果不給寬度,塊級元素就預設為瀏覽器的寬度,即就是100%寬; 行內元素:可以多個標簽存在一行,對寬高屬性值不生效,完全靠內容撐開寬高! 其中還有一種結合兩種模式有點的顯示模式: 行內塊元素:結合的行內和塊級的有點,不僅可以對寬高屬性值生效,還可以多個標簽存在 ...
  • 筆者最近在學習Element UI,覺得它提供的日期選擇器既簡單又美觀,於是仿照著寫了一個日期插件。筆者使用到的技術有ES5、CSS和HTML,控制項相容IE10+和谷歌瀏覽器。有一點需要註意,筆者使用到iframe包裹彈出層,由於瀏覽器的同源安全策略,代碼必須得放到tomcat的webapps文件夾 ...
  • 響應式開發 (就是利用媒體查詢針對不同寬度的設備進行佈局和樣式的設置,從而設配不同設備的目的) 響應式佈局容器響應式需要一個父級作為佈局容器,來配合子級元素來實現變化效果 原理:不同屏幕下,通過媒體查詢來改變這個佈局容器的大小,再改變裡面子元素的排列方式和大小,從而實現不同屏幕下,看到不同的頁面佈局 ...
  • rem即是以html文件中font-size的大小的倍數rem佈局的原理:通過媒體查詢設置不同屏幕寬度下的html的font-size大小,然後在css佈局時用rem單位取代px,從而實現頁面元素大小的動態適配,做出更漂亮整潔的頁面rem佈局的好處:1.頁面整潔2.動態適配缺點:1.需要計算rem, ...
  • element.offsetLeft/Top 獲取元素相對於最近的有定位的父元素的坐標,如果沒有有定位的父元素,則是文檔坐標 element.scrollTop/Left 獲取元素滾動捲去的距離 element.offsetWidth/Height 獲取元素的寬度高度(包含邊框) element.c ...
  • 後臺開發人員不擅長前端UI界面,而小型軟體公司沒有專職美工崗位,開發人員只能藉助開源UI框架,復用已有組件,完成用戶操作界面。EasyUI是基於jQuery的UI插件集合體,可幫助開發者輕鬆構建網頁。 官方地址:http://www.jeasyui.com/ 一、引用EasyUI 官網下載EasyU ...
  • 前言 vue.js是一套構建用戶界面的漸進式框架,vue.js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。 vue通過DOM事件操作和指令來進行視圖層和模型層的相互通訊,會為每一處需要動態更新的DOM節點創建一個指令對象。每當一個指令對象觀測的數據變化時,它便會對所綁定的目標節 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...