tag webpack

標籤
貢獻93
171
07:48 AM · Nov 03 ,2025
icecreamlj 頭像 u_16739385 頭像 yuhuashi_584a46acea21f 頭像 ruochuan12 頭像 fenanjiu 頭像 invalidnull 頭像 hai2007 頭像 u_11365839 頭像 u_14555121 頭像 limingcan562 頭像 birenyangguangcanlan 頭像 u_16164933 頭像

@webpack / 博客 RSS 訂閱

tonyyoung 頭像

拖泥羊 - 前端工程化7：自定義實現Webpack中的Loader和Plugin

loader對比plugin loader：用於資源加載並處理各種語言的轉換/編譯（例如將不同語言轉換為javascript）； plugin：用於資源加載以外的其他打包/壓縮/文件處理等功能； loader原理，loader的自定義實現 loader 用途 loader 用於資源加載並處理各種語言的轉換/編譯（例如將不同語言轉換為javascript）； loader 實現原理，自定義實

loader , plugin , 工程化 , webpack , 前端

收藏 評論

duan_599e492b96365 頭像

duan - mpvue與原生小程序框架混用實踐

使用場景 mpvue框架與原生小程序開發框架混用 實踐背景 項目開始完全使用mpvue開發，但是上線後發現有個表單頁面雙向綁定有問題（頁面改變，但是值不改變），嘗試多種方式仍未解決，遂使用原生小程序框架進行替換 基本思路 得益於小程序較好的分包機制，只需要將用原生框架開發的信息頁面的包(文件夾)移動到對應目錄，然後修改打包後app.json中pages頁面路徑即可。原理比較簡單，主要解決是流程

小程序 , webpack , mpvue

收藏 評論

u_10983731 頭像

wangyeke - 關於token pocket下載解決JSON丟失問題

Go語言中，當uint64或int64數值超過錢包下載時，Tekon.app官網JSON序列化會因float64精度限制導致精度丟失。解決方案包括：使用json:"id,string"標籤轉為字符串、自定義類型實現Marshaler接口、或使用第三方庫json-iterator將大整數序列化為字符串。 原理: 在 Go 語言中，當把uint64或int64類型

序列化 , webpack , 前端開發 , Json

收藏 評論

recordyu 頭像

XiaoYu - 前端構建工具webpack（原理篇）

目的：瞭解輸入打包命令後發生了什麼事情 本質：Node去運行一個js文件，這個js文件做的事情就是鋪墊好流程，接着啓動打包流程。 首先我們先來了解一下這個js文件到底有什麼東西，再來引出概念。 我把這個文件形容為一個車間，那麼車間最重要的是什麼呢，最重要的是要有機牀。 這個機牀在webpack構建中稱之為Compiler。它是一個編譯類。 那麼這個機牀要需要啓動的話要先準備什麼，需要先輸入它

構建工具 , node.js , webpack , 原理

收藏 評論

u_16213631 頭像

mob64ca1403c772 - 打包vue項目鏡像 vscode

vue-list 可以查看vue所有的組件； 選用模板常用的是webpack與webpack-simple。webpack-simple是基於Webpack@2.1.0-beta.25進行配置的版本，而webpack模板則是基於Webpack ^1.3.2配置的。 其中，最大的區別是webpack-simple沒有vue-router的中間件，

命令行 , 服務器 , 雲計算 , 打包vue項目鏡像 vscode , webpack , 雲原生

收藏 評論

madaoli666 頭像

MadaoLi666 - 一個極簡單的配置檢測工具

Introduction 前端項目中有多個環境的配置，在開發/測試/內測/上線各個階段都需要手動進行配置。且此項目有多個子項目的接入，在Devops流程中難以對配置進行檢查，因此寫了一個在Webpack打包Compiler initialize階段的環境配置檢查工具。 這個工具（暫時）去檢查各個環境下的配置文件導出的變量名稱是否相同 How to use Install npm i envi

node.js , plugin , webpack

收藏 評論

xiaomingtongxue_60853f460dd25 頭像

小明同學 - commonJS 和 ES6 模塊的區別

commonJS 和 ES6 模塊的區別 CommonJS 輸出的模塊是一個值的拷貝，ES模塊輸出的是一個模塊的引用； CommonJS 模塊輸出的是值的拷貝，一旦輸出之後，無論模塊內部怎麼變化，都無法影響之前的引用， commonJS 會緩存加載的模塊，後面直接從緩存裏面取值； ESModule import一個模塊後生成一個引用鏈接，在腳本真正執行時才會根據這個引用鏈接去模塊裏面取值

ecmascript-6 , module , webpack , 前端 , Javascript

收藏 評論

laoliudahuaqianduan 頭像

老劉大話前端 - js模塊化

一. 什麼是模塊化 模塊化是一種將系統分離成獨立功能部分的方法，可將系統分割成獨立的功能部分，嚴格定義模塊接口、模塊間具有透明性。 js中的模塊化方法，大致分為以下幾個：commonJS, amd, cmd, umd, esModule。下面我們來逐個擊破。 二. CommonJS commonjs規範為js提供一個美好的願景-希望js能夠在任何地方都去運行。它的定義也十分簡單，主要分為：模塊引用

ecmascript-6 , module , 模塊化 , webpack , Javascript

收藏 評論

mengyuhang4879 頭像

mengyuhang4879 - react自適應佈局 px轉rem

引言 在create-react-app項目中配置絕對單位px轉換為相對單位rem,其中使用postcss-plugin-px2rem轉換css/less/sass文件(此插件不支持內聯樣式轉換)，使用編寫的loader轉換內聯樣式 1.安裝插件 npm i postcss-plugin-px2rem 2.配置webpack 1 找到config/webpack.config.js裏po

react , loader , webpack , create-react-app

收藏 評論

never_mind_591150ba718a1 頭像

Never_Mind - package.json 部分屬性解讀

name 定義項目（包）名。規則如下： 不得多於 214 個字符（包含@scope/前綴在內） 不得以.、_開頭，且不得包含大寫字母 只允許使用 URL-safe 字符 version 定義項目（包）的當前版本號 description 定義項目（包）的簡要描述。registry 將提取該信息以方便搜索 keywords 定義項目（包）的關鍵字描述。registry 將提取該信息以方便檢

全棧 , node.js , vite , webpack , 前端

收藏 評論

whale_589d284a0713d 頭像

whale - 前端構建工具的區別與聯繫

前端自動化構建工具，我個人將其分為兩類：構建工具、模塊化工具。但由於模塊化工具的功能越來越豐富，兩者之間的界限也越來越模糊。 構建工具主要有：Gulp和Grunt 模塊化工具主要有：Webpack、Browserify，以及瀏覽器端的模塊化實現SeaJs、RequireJs 構建工具 Gulp：Gulp的處理過程，可以簡化為，以流的形式讀入文件 - 文件

gulp , browserify , seajs , webpack

收藏 評論

u_16213680 頭像

mob64ca140f67e3 - 如何給Github項目提交PR -

貢獻前準備 開發環境配置 javascript-state-machine項目基於以下工具構建： Webpack 2：模塊打包工具 UglifyJS2：代碼壓縮工具 Ava：測試框架 首先克隆項目倉庫： git clone https://gitcode.com/gh_mirrors/ja/java

後端開發 , webpack , JAVA , Git , Javascript

收藏 評論

xianyulee 頭像

閒人 - 利用webpack的 require.context api進行自動導入

require.context api及參數介紹 require.context(dir, useSubdir, regExp) 參數dir：用於動態加載的目錄 參數useSubDir：是否對dir指定的子目錄進行自動導入， type=boolean 參數regExp：匹配文件的正則表達式，可以在文件中加入特定的字符，按照特定的字符去加載對應的文件 eg: re

webpack , require , 前端

收藏 評論

liane 頭像

Liane - iconfont使用及webpack打包字體圖標

一、iconfont使用 官網：https://www.iconfont.cn/ 1、找到需要的icon圖標，添加至購物車 2、購物車中點擊添加至項目，可加入到GitHub的項目中,也可直接下載到本地 3、引用圖標 unicode引用 unicode是字體在網頁端最原始的應用方式，特點是： 兼容性最好，支持ie6+，及所有現代瀏覽器。 支持按字體的方式去動

iconfont , webpack , 前端

收藏 評論

weiman_5e0ee4f995e41 頭像

未滿 - Webpack使用傳統工程項目

説明 這是最近在學習和實踐webpack的一次學習筆記,有不足歡迎指正 這裏不涉及前端框架部分,單純是使用webpack 工程目錄結構 webpack-demo (學習工程目錄) |---config |------webpack.base.js (用於公用配置) |------webpack.dev.js (用於開發配置) |------webpack.pro

webpack-dev-server , webpack3 , webpack , webpack入門

收藏 評論

limingcan562 頭像

limingcan - 弄懂這幾個概念後，我對webpack有了新的理解

前言 隨着vite的誕生，webpack似乎漸漸的被大家拋棄。前陣子我也用vue@3.x + vite@4.x開發了一個後台管理系統，體驗了一把，確實有被vite飛快的啓動速度給驚豔到。 但是畢竟webpack已經誕生了許久，也經過市場的一些考驗，並且它有着豐富的插件，豐富的功能，一些大型的項目也使用過它，目前來説，它是一個相對於vite來説更穩定的打包工具。 基於以下原因： 有些公司由於歷史

構建工具 , webpack5 , webpack , 前端 , Javascript

收藏 評論

u_16739385 頭像

夢的點滴 - chunk分割與緩存策略

在前端工程化中，Webpack 是打包的核心工具，但隨着項目體積增大，打包速度慢、產物體積大、瀏覽器緩存失效等問題會逐漸凸顯。Webpack 5 針對這些痛點做了大量優化，其中 chunk 分割（拆包）和 緩存策略（持久化緩存）是提升構建效率、減少用户重複加載的關鍵。本文從實戰角度，拆解這兩大優化方向的核心思路和落地代碼，幫你打造高性能的打包流程。 一、Chunk 分割：拆

加載 , 緩存 , webpack , 前端開發

收藏 評論

user_p5fejtxs 頭像

林一一 - 編寫 loader 和 plugin

原文地址 編寫 loader 和 plugins github 一、loader 1.loader 介紹 loader 是什麼 loader 其實是一個函數，對匹配到的內容進行轉換，將轉換後的結果返回。 loader 作用 在 webpack 中 loader 就像是一位翻譯官。webpack 只認識 JavaScript 這們語言，對於其他的資源通過 loader 後可以轉化做預處理

loader , plugin , webpack , Javascript

收藏 評論

u_14555121 頭像

mb5d873393ad030 - BitpieSQL錢包性能的三要素

在數據庫系統中，BitpieSQL錢包下載查詢地址biepe.app；性能是衡量應用健康度的關鍵指標。許多開發者將性能優化簡單歸結為"添加索引"，但實際上，高效的查詢是索引策略、執行計劃優化和數據分佈理解三者協同作用的結果。本文將深入探討這三要素的相互作用機制，幫助您構建系統化的SQL性能優化思維。 1 SQL執行的生命週期與性能瓶頸 1.1 查詢處理的全鏈路視角

數據 , 執行計劃 , 數據分佈 , webpack , 前端開發

收藏 評論

skychx 頭像

鹵代烴 - 🔬 一文搞懂前端兼容問題

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 對於大部分開發者來説，版本兼容是一件存在感很低的事情，因為它在絕大部分情況下都是一行配置，在一些前端工具鏈（例如 Babel、CoreJS，Autoprefixer 等工具）的幫助下適配到目標瀏覽器，只會在一些大的 break change 事件（例如 Vue3 必須在支持 Proxy 的現代瀏覽

瀏覽器兼容性 , webpack , babel , 兼容性問題 , 前端

收藏 評論

hai2007 頭像

你好2007 - 關於字符串解析的一點理解 （以解析一段HTML字符串為例）

在分析一段字符串的時候，可以藉助字符串的indexOf等方法，或者是正則表達式，可是，如果需要解析的是下面這段字符串： group arc c-bind:cx='_width*0.5' c-bind:cy='_height*0.5' c-bind:radius1='_min*0.5' radius2='100' deg='120deg' /arc group c-for='

vue-loader , 算法 , webpack , template-engine , 前端

收藏 評論

geeeger 頭像

geeeger - webpack中打包後端模板的思路

整合jade輸出到webpack 目前來説，由於seo需要，前端需要配合中間層使用後端渲染。當前的構建中，我們的構建會全量將jade移入相應的dest文件，修改後會對對應的文件進行重新複製移動，但當我們使用webpack的時候，後端模板的處理變成了一件頭疼的事。 如果要用webpack，我們首先要處理的便是模板文件中引用的靜態資源的問題。我們應該做的事情是想如何將jade資源通過自己的手段分析，達

jade , webpack

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 看，這些 plugins 常用又簡單

前面文章中 體驗了webpack的打包 、解析css資源 、處理圖片字體等文件 接下來看看 plugins 有什麼作用吧~ 項目路徑如下，和上一篇 處理圖片字體等文件 項目保持一致 demo ├─ src │ ├─ css │ │ ├─ index.css │ │ └─ file.css │ ├─ img │ │ ├─ portrait.png │ │

plugin , webpack , 前端 , Javascript

收藏 評論

wanglinfeng 頭像

王林峯 - webpack項目中使用grunt監聽文件變動自動打包編譯

【小技巧】webpack項目中使用grunt監聽文件變動自動打包編譯 分享背景：編寫npm插件的時候，在項目裏的測試html文件內引用需要從入口文件轉譯打包成ES5。因此測試時每次改動都需要手動需要npm run build一下，很麻煩。獲知grunt有個watch功能，折騰了一下，可以做到每次js文件改動時自動build一波，很靈性。 安裝依賴包 //安裝grunt npm i grunt

grunt , webpack

收藏 評論