tag webpack

標籤
貢獻93
168
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 訂閱

invalidnull 頭像

註銷 - Kitten編程貓的工程文件 bcm，能發佈成Android平台的apk文件嗎

根據Kitten編程貓社區的這個帖子： https://shequ.codemao.cn/comm... 產生的不是可執行文件或者源碼，產生的是配置文件，告訴執行文件的框架該怎麼做的配置文件。 必須依賴編程貓軟件，可以在網上下載編程貓格式工廠來把bcm文件轉為exe文件。 不能直接轉換成安卓的apk文件。 可以參照這個帖子： https://shequ.codemao.cn/c

apk , webpack , cordova , apk反編譯 , cordova-android

收藏 評論

laxnogithub 頭像

laxnogithub - 前端-圖片壓縮，基於vue/webpack的tinypng插件

介紹/info auto compress img by tinypng when used webpack or vue This plugin can record the compression and will not recompress the file if it is not updated 適用於vue和webpack的tinypng插件，支持調整圖片尺寸 能夠根據記

vue.js , plugin , webpack , npm , Javascript

收藏 評論

feipeng123s 頭像

feipeng123s - 爪哇學習筆記——Webpack原理

前端工程化 技術選型 統一規範——eslint、husky 測試、部署、監控——ut、e2e、mock 性能優化 模塊化重構 webpack流程 webpack的構建流程可以分為以下三大階段： 初始化：啓動構建，讀取與合併配置參數，加載Plugin，實例化Compiler。 編譯：從Entry出發，針對每個Module串行調用對應Loader去翻譯文件的內容，再找到該Modul

loader , plugin , webpack

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 去中心化組件共享方案 —— Webpack Module Federation（模塊聯邦）

在大型應用中， 我們可能會對其進行拆分，分成容器、主應用和多個子應用，使拆分後的應用獨立開發與部署，更加容易維護。但無論是微應用、公共模塊應用，都需要放到容器中才能使用。 如果多個應用之間希望資源共享，除了使用 npm 包的形式，基於Webpack 5 Module Federation（模塊聯邦）實現的EMP微前端方案也可以一試，它不限制技術棧，但依賴於 Webpack5。 使用場景 如果應用B

組件通信 , 工程化 , webpack , 前端 , Javascript

收藏 評論

u_11365839 頭像

尼羲 - Webpack自定義Loader

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

執行順序 , yyds乾貨盤點 , webpack , Css , 前端開發 , babel

收藏 評論

chauncywu 頭像

Fw惡龍 - Stylus系列——webpack-spritesmith配合stylus使用示例

原文地址：https://segmentfault.com/a/1190000021487215 作者：Fw惡龍 本文首發於：思否 一、前言 基於Webpack的CSS Sprites實現方案，若是直接在html中調用雪碧圖圖標已經很方便，但是實際開發過程可能遇到需要在偽元素中使用雪碧圖，或者需要hover切換另一個圖標，這種情況下就無法在css中直接調用圖標類名。這時，就需要

stylus , webpack

收藏 評論

u_16739385 頭像

夢的點滴 - 如何監控 Webpack 打包後的文件體積和性能

在前端工程化流程中，Webpack 打包後的文件體積過大、加載性能差是常見痛點——但很多開發者只關注“能打包成功”，卻忽略了對打包產物的監控。其實通過合理的工具和配置，既能精準分析文件體積構成，也能量化打包性能瓶頸，進而針對性優化。本文從“體積監控”和“性能分析”兩大維度，分享實戰落地的方法，幫你把打包產物的體積和性能管起來。 一、監控打包文件體積：精準定位體積膨脹點

analyzer , 緩存 , bundle , webpack , 前端開發

收藏 評論

careteenl 頭像

careteenL - Create React App 源碼揭秘

目錄 背景 monorepo管理 monorepo優勢 monorepo劣勢 Lerna 全局安裝Lerna 初始化項目 創建Package 開啓Workspace LernaScript CreateReactApp架構 packages/create-react-app 準備工

react , webpack , lerna , create-react-app , 前端

收藏 評論

u_16099306 頭像

落花流水人家 - webpack和vite的比較

否瞭解它們的區別呢？我們在做項目時要如何選擇呢？就是前端的項目打包，我們常用的構建工具有Webpack和Vite，那麼Webpack和Vite是兩種不同的前端構建軟件,那麼你們又 一、工具定義 1、Webpack：是一個強大的靜態模塊打包工具通過，它能夠將各種類型的文件，如JavaScript、CSS、圖片等，作為模塊進行打包，並生成最終的靜態資源記錄。Webpack

構建工具 , webpack , Css , 開發者 , 前端開發 , HTML

收藏 評論

u_16739385 頭像

夢的點滴 - Webpack 5 性能優化：chunk分割與緩存策略詳解

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

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

收藏 評論

u_16164933 頭像

謝爾登_ - 面試官最喜歡問的Webpack中的loader和plugin到底有什麼區別？

基本概念 ​Loader​：對單個資源（文件）做轉換的函數（把一個文件從一種內容轉換為另一種內容），在 module 層面運行。 ​Plugin​：在整個構建過程的生命週期裏插入鈎子邏輯（修改編譯器、生成資源、注入行為等），在 compiler/compilation 層面運行。 概念説明 Loader 輸入：某個源文件（例如

生命週期 , webpack , Css , 前端開發

收藏 評論

henry_chen_59e5bd7d4b9d7 頭像

henry_chen - 使用 webpack 引用 zepto

作者：陳家賓 日期：2017-12-15 背景 由於 zepto 庫本身不支持 CommonJs 規範，不支持 import/export，所以不能直接以 import 的形式引入，所以這裏需要做一些特殊處理 處理方法 方法一：引用 zepto-webpack 庫 安裝 npm i -D zepto-webpack 引用 import $ from 'zepto'

zepto , webpack

收藏 評論

ztmin 頭像

ztmin - webpack是如何實現模塊化加載？

webpack支持的模塊規範有 AMD 、CommonJS、ES2015 import 等規範。不管何種規範大致可以分為同步加載和異步加載兩種情況。本文將介紹webpack是如何實現模塊管理和加載。 同步加載如下： import a from './a'; console.log(a); 異步加載如下： import('./a').then(a = console.log(a)); webpack

cmd , amd模塊加載 , webpack , require , import

收藏 評論

dirackeeko 頭像

DiracKeeko - [Vue] vue-cli3中chainWebpack和configureWebpack的區別

chainWebpack 的底層是 webpack-chain。採用的是命令式 Webpack 配置。 configureWebpack 的底層是 webpack-merge。configureWebpack 的值可以是Object也可以是Function。(若是Function這個Function的返回值也應是一個Object) 且直接設置的Object和函數返回的Object都是配置子集

vue.js , vue-cli3 , webpack , vue-cli , 前端

收藏 評論

jasinyip 頭像

JasinYip - 前端工具鏈課（二）—— 模塊化工具及組件化思想

第二個問題，我想從這個最簡單的 HTML 頁面開始。 !DOCTYPE html html head titleTest/title /head body ... /body 當我們想寫一些樣式的時候，我們通常會引入一個外部的 CSS 文件，就像這樣： link rel="stylesheet" href="style.css" 有時我們可能會想用一個比如説 Bootstrap 這種的

前端工程化 , 前端工具 , 模塊化 , webpack , 前端

收藏 評論

teobler 頭像

teobler - webpack

個人博客前端渣渣不定期分享自己所學的前端知識 使用webpack也有一段時間了，但是沒有系統的去學習，最近無心代碼，正好用這段時間系統地看一下webpack,借鑑一下前輩們的經驗，防止忘記，記錄下來。 什麼是webpack Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。 Webpack可以從終

單頁面應用 , webapp , webpack , webpack入門

收藏 評論

limingcan562 頭像

limingcan - 帶着這種思想，我快速高效的學會了webpack“開發環境配置”

前言 我們在使用webpack時，經常會看到類似以下結構： build ├── webpack.common.js └── webpack.dev.js └── webpack.prod.js 很多時候，webpack的配置我們基本複製粘貼過來的，沒有想過為什麼我們要把配置文件拆解成這麼多。因此，當我們自己去學習配置webpack時，我們經常會出現以下等問題： 開發環境構建速度慢 打包後頁面

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

收藏 評論

sergey-melukov 頭像

Sergey Melukov - Statoscope: A Course Of Intensive Therapy For Your Bundle

In 2016, I released the first version of the Statoscope tool (named “Webpack Runtime Analyzer” at the time). It was a technical demo of another rempl tool made by Roman Dvornov. We wanted to provide

performance , Techniques , Tools , webpack

收藏 評論

jiasm 頭像

Jarvis - 使用 TypeScript 改造構建工具及測試用例

最近的一段時間一直在搞TypeScript，一個巨硬出品、賦予JavaScript語言靜態類型和編譯的語言。 第一個完全使用TypeScript重構的純Node.js項目已經上線並穩定運行了。 第二個前後端的項目目前也在重構中，關於前端基於webpack的TypeScript套路之前也有提到過：TypeScript在react項目中的實踐。 但是這些做完以後也總感覺缺了點兒什麼 _（沒

mocha , chai , webpack , typescript , Javascript

收藏 評論

frontoldman 頭像

frontoldman - nodejs之http-proxy幾點常見問題

http-proxy http-proxy是一個nodejs的http代理庫，已經被webpack-dev-server集成進來，做代理使用。原因是在前後端分離大行其道的今天，我們如果需要在本地調後端api接口，不配置hostname的話，必然是一個跨域的請求。因為瀏覽器的跨域安全限制，調取是不通的，所以本地代理就成了一個本地開發環境的必選項。 '/saasapi/*': { target

node.js , httproxy , webpack , 前端 , Javascript

收藏 評論

u_14555121 頭像

mb5d873393ad030 - TP下載:tekon.app官網NativeAPP進入融合Web技術

Web技術在TPApp中不斷的官網應用和發展。從錢包功能下載機到智能機，從k-java到移動App，從WebBrowser到Webkit，我們可以將Web技術在Native App中的發展分為5個階段，內置、嵌入、橋接、混合、融合。 一、內置自定義Web容器時代 2010年之前，那時還是feature phone為主流的時代，硬件配置低，系統功能弱，手機應用以內置為主

app , webpack , 前端開發 , HTML , Web

收藏 評論

u_17593224 頭像

辰辰99 - 渡一-web前端全階段

在數字化浪潮席捲各行各業的今天，Web 前端開發已成為連接用户與產品體驗的核心橋樑。無論是企業官網、電商平台，還是複雜的管理後台與交互式應用，都離不開前端技術的支撐。《渡一 Web 前端全階段教程：從零基礎到就業，吃透 HTML/CSS/JS 全棧技能》一文，正是為零基礎學習者量身打造的一條系統化、實戰導向的成長路徑。本文將提煉其核心邏輯與關鍵階段，幫助讀者快速把握從前端

零基礎 , webpack , Css , 前端開發 , Web

收藏 評論

u_16099242 頭像

網線小遊俠 - JavaScript項目打包app

經常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等兩相似的文件名。 其實以上兩個文件名的內容是一樣的，不過帶min代表的是佔用最小的空間，為項目提高性能。壓縮的部分如換行，空格等。 可以看出兩文件的體積相差很大。 所以我們一般的話項目上線會用到帶m

加載 , JavaScript項目打包app , webpack , Css , 前端開發 , Javascript

收藏 評論

u_11365839 頭像

尼羲 - webpack配置publicPath無效問題

背景 項目使用vue-cli-service@4打包一個bundle.js； 希望bundle引用的文件使用cdn，但是發現publicPath設置無效： 我們打印了最終生成的webpack config // 打印 config api.configureWebpack(config = { console.log('hyh

yyds乾貨盤點 , 搜索 , 自定義 , bundle , webpack , 前端開發

收藏 評論