@前端

動態 列表
@coderleo

手擼Webpack自定義Loader

前言 我們知道 webpack 只能處理 JavaScript 和 Json 文件,面對 CSS、圖片等資源是無能為力的,它需要通過 loader 將這些資源轉換為可處理的模塊。 loader 的本質是一個解析資源的函數模塊,該函數對接受到的內容進行轉換,然後返回 webpack 可處理的資源。 loader的執行順序 loader 可根據執行順序區分為: pre: 前置 loader no

coderleo 頭像

@coderleo

昵稱 coderLeo

@coderleo

手擼Webpack自定義Plugin

前言 webpack-plugin 向開發者提供了 webpack 引擎中完整的能力。通過插件擴展 webpack,加入自定義的構建行為,使 webpack 可以執行更廣泛的任務,擁有更強的構建能力。 與 loader 相同,plugin 的本質也是一個模塊(它包含一個apply函數),符合 webpack 的一切皆模塊的理念。 工作原理 webpack 就像一條串行的生產線,要經過一系列處理流程

coderleo 頭像

@coderleo

昵稱 coderLeo

@jueqiangqingtongsan

Vite VS Webpack,誰才是最強構建工具

Vite VS Webpack,誰才是最強構建工具 前言 大家好,我是倔強青銅三。是一名熱情的軟件工程師,我熱衷於分享和傳播IT技術,致力於通過我的知識和技能推動技術交流與創新,歡迎關注我,微信公眾號:倔強青銅三。 Vite vs Webpack:哪個更適合您的項目? 隨着Web應用的不斷髮展,對更快、更高效的開發工具的需求也在日益增長。多年來,Webpack一直是複雜應用的首選打包工具,以其強

jueqiangqingtongsan 頭像

@jueqiangqingtongsan

昵稱 倔強青銅三

@ihengshuai

前端主流構建工具

本文首發博客網站,由於圖片和格式解析問題,可前往閲讀原文 隨着前端開發複雜度的提升,構建工具在開發流程中扮演着越來越重要的角色。這些工具可以幫助開發者實現代碼的打包、優化、轉譯、模塊化處理等功能,從而提升開發效率和用户體驗。本文將以當前主流的前端構建工具為核心,介紹它們的特點、適用場景及差異 構建工具 Grunt Grunt 是較早期的任務運行工具,主要通過任務(tasks)系統自動化完成前端開發

ihengshuai 頭像

@ihengshuai

昵稱 大衞talk

@lyflexi

《95%開發者不知道的vue.config.js高階玩法》手撕Webpack配置鏈/SSR優化/多頁應用,3倍構建效率實戰方案

Vue工程化配置指南:vue.config.js深度解析 一、初始化配置文件 在Vue CLI工程根路徑下創建配置文件: 項目層級示意: your-project/ ├── src/ ├── public/ ├── package.json └── vue.config.js # 新增配置文件 基本模板結構: module.exports = { // 工程化配置區域 } 二、核心配置參數解

lyflexi 頭像

@lyflexi

昵稱 月半大熊貓

@ruochuan12

Taro 源碼揭秘:8. Taro 是如何使用 webpack 打包構建小程序的?

1. 前言 大家好,我是若川,歡迎關注我的公眾號:若川視野。從 2021 年 8 月起,我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動,感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外,想學源碼,極力推薦關注我寫的專欄《學習源碼整體架構系列》,目前是掘金關注人數(6k+人)第一的專欄,寫有幾十篇源碼文章。 截至目前(2024-11-07),目前最新是 4.0.7,

ruochuan12 頭像

@ruochuan12

昵稱 若川

@ruochuan12

Taro 源碼揭秘:9. Taro 是如何生成 webpack 配置進行構建小程序的?

1. 前言 大家好,我是若川,歡迎關注我的公眾號:若川視野。從 2021 年 8 月起,我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動,感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外,想學源碼,極力推薦關注我寫的專欄《學習源碼整體架構系列》,目前是掘金關注人數(6k+人)第一的專欄,寫有幾十篇源碼文章。 截至目前(2024-11-22),目前最新是 4.0.7,

ruochuan12 頭像

@ruochuan12

昵稱 若川

@ruochuan12

Taro 源碼揭秘:10. Taro 到底是怎樣轉換成小程序文件的?

1. 前言 大家好,我是若川,歡迎關注我的公眾號:若川視野。從 2021 年 8 月起,我持續組織了好幾年的每週大家一起學習 200 行左右的源碼共讀活動,感興趣的可以點此掃碼加我微信 ruochuan02 參與。另外,想學源碼,極力推薦關注我寫的專欄《學習源碼整體架構系列》,目前是掘金關注人數(6k+人)第一的專欄,寫有幾十篇源碼文章。 截至目前(2024-12-26),目前最新是 4.0.8,

ruochuan12 頭像

@ruochuan12

昵稱 若川

@yuhuashi_584a46acea21f

webpack優化:提高二次構建速度

痛點: 開發過程中改一行代碼卻要等webpack構建半天實在太捉急。 項目背景 我們的項目是@vue/cli4生成的,基於webpack和vue2開發,未使用ts。用到了很多jquery、lodash、echarts等第三方依賴。 參考: @vue/cli4已經默認配置過一些優化方法了,比如為babel-loader增加cache-loder。請教了deepseek和google之後,根據項目的實

yuhuashi_584a46acea21f 頭像

@yuhuashi_584a46acea21f

昵稱 雨花石

@dirackeeko

[前端] webpack + craco項目遷移Rsbuild

對一個非rsbuild的既有項目,遷移到rsbuild,有兩種途徑;其一是用rsbuild官方工具新建空殼項目,將舊項目的代碼文件搬到新的殼項目中,並安裝項目需要的依賴項,編寫rsbuild.config.ts配置;其二是修改舊項目的依賴項,刪除無關依賴和無關配置,安裝rsbuild項目所用的依賴項,編寫rsbuild.config.ts配置。 pnpm i @rsbuild/core @r

dirackeeko 頭像

@dirackeeko

昵稱 DiracKeeko

@yuhuashi_584a46acea21f

review代碼系列(二):

背景: 因技術優化需要,打算將現有項目庫的部分代碼摘出來單獨構建,所以在package.json加了新的打包命令,當然也要單獨進行webpack配置。 處理babel時發現有兩種babel配置,既有babel.config.js,也有.babelrc。因為都在根目錄下面,所以新的構建任務默認也會使用這兩個babel配置。考慮到後續的單獨維護,覺得用單獨的babel配置比較好。那就要處理

yuhuashi_584a46acea21f 頭像

@yuhuashi_584a46acea21f

昵稱 雨花石

@hanshuixin_666

Windows 11 安裝使用 nvm,Node.js、npm多版本管理、切換

Windows 11 安裝使用 nvm,Node.js、npm多版本管理、切換 本文對應的講解視頻鏈接:https://www.bilibili.com/video/BV1qspxzrEWP/ 1. nvm 簡介 背景:在日常的前端或Node.js開發中,我們經常會遇到不同的項目需要依賴不同版本的 Node.js 和 npm。直接安裝和卸載版本來回切換非常麻煩,而且容易出錯。為了解決這個問題,

hanshuixin_666 頭像

@hanshuixin_666

昵稱 寒水馨

@jump_and_jump

前端部署工具 PinMe

PinMe 簡介 什麼是 PinMe? PinMe 是一個免費的 IPFS 託管平台,專為靜態網站部署設計。它能讓開發者在幾秒鐘內將網站部署到 IPFS 網絡上,確保內容的持久性和抗審查能力。 PinMe 的核心價值是提供簡單、快速、免費的前端部署體驗,讓開發者專注於內容創作。 為什麼選擇 PinMe? 相比傳統託管服務,PinMe 具有以下優勢: 完全免費:無需支付服務器費用或訂閲費用 去

jump_and_jump 頭像

@jump_and_jump

昵稱 jump__jump

@gomi

加速你的 Bun 並行開發:bun-tasks 全攻略

加速你的 Bun 並行開發:bun-tasks 全攻略 如果你在 Bun 項目裏需要同時運行多個腳本,又不想為兼容性煩心,bun-tasks 會是最順手的選擇。這個專為 Bun 設計的並行任務運行器,幫你在一條命令中啓動多個任務、智能合併環境變量,並自動識別 package.json 中的腳本。只要先確認環境裏 bun --version 可用,就能即刻體驗 Bun 原生的多任務流程。 為什麼選擇

gomi 頭像

@gomi

昵稱 Gomi

@junxiudetuoba

校園跑腿小程序開發,實戰指南:基於Uni-app/微信小程序源碼的校園應用全棧開發

基於 Uni-app 或微信小程序開發校園應用(如校園跑腿、校園服務平台等),需覆蓋前端開發、後端接口設計、數據庫搭建、部署上線等全流程。 技術棧選型 前端框架 Uni-app:跨端優勢(同時支持微信小程序、H5、App),語法兼容 Vue,適合校園多場景分發(小程序為主,H5 供網頁端)。 微信原生小程序:若僅需小程序端,原生框架性能更優,適合複雜交互場景(如地圖實時跟

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

從 “單一圈子” 到 “多圈子平台”:源碼搭建圈子系統如何適配未來技術趨勢(如 AI、元宇宙)

在數字化社羣演進的浪潮中,我們正目睹一個關鍵的範式轉移:從服務於特定羣體的 “單一圈子” ,向互聯互通、價值共生的 “多圈子平台” 演進。這種演進不僅是規模的擴張,更是生態的質變。而基於源碼搭建的系統,因其固有的 “可塑性” 與 “自主性” ,在擁抱AI、元宇宙等未來技術趨勢時,展現出前所未有的適應性與爆發力。 一、 範式轉移:從“孤島”到“星系”的“多圈子平台” 單一圈子的侷

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

爆款手遊源碼揭秘:如何低成本搭建自己的“暗區突圍”工具箱? 別再做“肝帝”!

你是否在《暗區突圍》中為了熟悉地圖、記憶物資點而跑斷腿?是否因為記不住槍械配裝數據而反覆試驗?真正的“大佬”,不僅槍法好,更是善於利用工具的“科學家”。核心理念: 我們不修改遊戲客户端,不注入內存,不封號。我們通過“外部觀察”和“數據分析”來提升遊戲理解。 核心技術揭秘——“一鍵搭建”的魔法 我們採用 Python 作為核心語言,因為它擁有極其豐富的開源庫,堪稱“膠水語言”,能快速粘合

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

源碼搭建 + 私域運營:陪玩小程序從 0 到 1 的變現閉環搭建

源碼搭建陪玩小程序並結合私域運營,核心是通過 “小程序承接流量與交易,私域沉澱用户並復購”,最終形成 “獲客 - 轉化 - 留存 - 復購” 的完整變現閉環,關鍵在於兩者的高效聯動。 一、基礎:用源碼搭建適配私域的陪玩小程序 源碼搭建階段需提前預留私域入口,避免後期二次開發,重點做好 3 個核心設計。 預留私域引流入口 強化用户標籤體系 打通交易與私域數據

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

自帶用户粘性 buff:小程序圈子系統的 5 大核心功能解析

核心定位與口號** 首先,我們可以將您的標題精煉成更易傳播的口號: 主口號:自帶用户粘性Buff!揭秘小程序圈子的5大核心功能 副口號:從“用完即走”到“用了再來”,打造高粘性私域社區的秘訣就在這裏。 功能 1:話題聚合功能 —— 讓用户 “有地兒聊” 這是搭建圈子交流框架的基礎,能精準匹配用户興趣。 粘性邏輯:用户能快速找到自己感興趣的內容板塊,避免信息

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

不懂代碼也能運營?Uni-App陪玩系統+PHP後台,微信小程序讓你專注引流變現

即使不懂代碼,也能通過成熟的 Uni-App 陪玩系統 + PHP 後台 快速搭建微信小程序並專注運營引流 —— 核心在於利用現成的標準化系統降低技術門檻,將精力集中在用户獲取、變現策略和服務優化上。 一、零代碼搭建:用現成系統跳過技術環節 選擇開箱即用的標準化系統 無需自己開發,直接採購成熟的陪玩系統源碼(如基於 Uni-App+PHP 的多端解決方案),這類系統通常已包含:

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@junxiudetuoba

90% 玩家不知道的 “上分捷徑”:三角洲俱樂部代練勝率曝光!

你是不是也有過這樣的經歷?在《三角洲行動》裏鏖戰整晚,卻因為隊友配合不力、戰術混亂,分數不升反降。皇冠段位看似近在咫尺,卻又彷彿遠在天邊。你開始懷疑自己的槍法和意識……但請先停下自我否定,因為問題的根源,可能並不在你身上。 一、整體架構概覽 採用 “前後端分離 + 微服務” 架構,支持多終端(小程序、APP、H5、PC 管理端)接入,核心分為: 前端層:用户交互入口(玩家端、代

junxiudetuoba 頭像

@junxiudetuoba

昵稱 伊伊DK

@linzai_6904290569daa

Vue.js 第一章學習筆記

前言 最近在深入學習 Vue.js設計與實現 ,深感“理解設計理念”比“記憶API用法”更為重要。 我決定通過文章來記錄和輸出學習內容,這不僅是為了檢驗自己的理解程度,更是為了梳理Vue.js背後的核心思想和實現機制。希望這種“知其所以然”的探索,能為你帶來啓發。 1.1命令式和聲明式 首先什麼是聲明式和命令式,看接下來我們要做的事 獲取 id 為 app 的 div 標籤 它的文本內容為

@immerse

現代Unix命令行工具革命:30個必備替代品完整指南

大家好,我是 Immerse,一名獨立開發者、內容創作者、AGI 實踐者。 關注公眾號:沉浸式趣談,獲取最新文章(更多內容只在公眾號更新) 個人網站:https://yaolifeng.com 也同步更新。 轉載請在文章開頭註明出處和版權信息。 我會在這裏分享關於編程、獨立開發、AI乾貨、開源、個人思考等內容。 如果本文對您有所幫助,歡迎動動小手指一鍵三連(點贊、評論、轉發),給我一些支持和鼓勵,

immerse 頭像

@immerse

昵稱 沉浸式趣談