tag webpack

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

lixiaogui 頭像

 李小貴  - node後端（koa）如何打包加密，以及node_modules如何優化？

用node開發後端會存在那些問題呢？在我們用node做後端開發遇到的三個問題。一安全問題，代碼並沒有編譯就直接傳遞了，只要進去服務器代碼可以看得一清二楚。二是文件體積問題，隨便一個項目node_modules件包就是一百兆左右。第三個是部署問題，每次部署新項目都要下載安裝插件導致部署非常緩慢。 我們又有哪些解決方案呢？首先我們來看一下最重要的安全問題，node沒有像java做好之後可

koa2 , node.js , webpack , 優化 , 後端

收藏 評論

cafehaus 頭像

咖啡教室 - vue項目中webpack-dev-server的open和host0.0.0.0配置衝突

一個比較老的公司項目，webpack 用的 v3 版本，為了實現localhost、127.0.0.1和本機ip可以同時訪問，webpack的devServer裏的 host 我們一般會設置成 0.0.0.0，這樣本機所有 ipv4 地址都可以實現訪問。 比如我們要將本地運行的前端項目，分享給公司的後端、產品、測試...預覽效果，如果 host 直接設置的 localhost，運行後打開的地址 h

vue.js , webpack-dev-server , webpack , 前端

收藏 評論

esunr 頭像

EsunR - 解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題

前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時，通常會遇到一個很麻煩的問題，即我們無法提前獲取到當前頁面所需的資源，從而不能提前加載當前頁面所需的 CSS，導致客户端在獲取到服務端渲染的 HTML 時，得到的只有 HTML 文本而沒有 CSS 樣式，之後需要等待一會兒才能將 CSS 加載出來，也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐，可以參考：

服務端渲染 , webpack , Css , ssr , 前端

收藏 評論

fenanjiu 頭像

南玖 - 【webpack系列】從核心概念到上手配置

前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它

工程化 , webpack , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 【webpack系列】從基礎配置到掌握進階用法

前言 本篇文章將介紹一些webpack的進階用法，演示內容繼承自上一篇文章的內容，所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容，會更有利於此篇的學習～ 文件指紋 文件指紋指的是打包輸出的文件名後綴，一般用來做版本管理、緩存等 webpack的指紋策略有三種：hash、chunkhash、contenthash，它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac

工程化 , webpack , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細緻排查過程

事情的起因是這樣的，在一個已上線的項目中，其中一個包含登錄和獲取菜單的接口因響應時間較長，後端讓我嘗試未經服務轉發的另一域名下的新接口，舊接口允許跨域請求，但新接口不允許本地訪問（只允許發佈測試/生產的域名訪問）。 問題 那麼問題來了，本地環境該如何成功訪問到新的接口並驗證業務功能是否生效呢？ 嘗試過程 我首先就想到了直接在 webpack 項目中配置 devServer，並且修改接口地址

webpack-dev-server , node.js , webpack , 前端 , Javascript

收藏 評論

songxianling1992 頭像

songxianling1992 - webpack build打包保留歷史版本資源包；解決部署後；客户端白屏問題

背景: taro+h5的項目; 每次build上線的時候; 如果這時候有人正在使用 h5頁面 ；因為jenkins部署是直接替換掉原來的資源；導致 單頁面應用 的頁面找不到之前的資源；出現白屏、點擊無反應、xxx is not defined 的情況 前端打包解決思路 部署的時候不刪除之前的資源包dist；以保證正在使用的客户端用户始終能找到對應的資源。 將打包資源的文件夾名定義為 版

vue.js , 前端工程化 , 打包 , webpack , taro

收藏 評論

54r9rxzy 頭像

Tqing - Webpack的誕生與問題解決之道

背景 在早期的前端技術標準根本沒有預料到前端行業會有今天的發展，在設計上存在很多缺陷，隨着web應用複雜性增加，網頁已經從展示簡單的文案和圖像逐漸演變為功能複雜、交互密集的應用程序，這種變化推動了前端模塊化的發展，以應對以下幾個挑戰： 依賴管理混亂 全局作用域污染 代碼膨脹 舉個例子來説明下： !DOCTYPE html html lang="en" head meta ch

模塊化 , webpack

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 從0到1：React項目中的Webpack配置實戰

公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目

react , webpack-dev-server , webpack , 前端 , Javascript

收藏 評論

heath_learning 頭像

heath_learning - 解決vue項目導入js報does not provide an export named 'defanlt’錯誤問題

問題描述 使用webpack打包的umd格式的js插件導入到vue2項目中無法使用，報錯如下： SymtaxError: The reguested module '/xxxin js’does not provide an export named 'defanlt’ vue-cli版本不同現象： vue-cli 4.5.15會報’does not provide an exp

ecmascript-6 , es6module , vue-cli3 , commonjs , webpack

收藏 評論

coderleo 頭像

coderLeo - 手擼Webpack自定義Loader

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

前端工程化 , webpack , 前端 , Javascript

收藏 評論

coderleo 頭像

coderLeo - 手擼Webpack自定義Plugin

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

前端工程化 , webpack , 前端 , Javascript

收藏 評論

jueqiangqingtongsan 頭像

倔強青銅三 - Vite VS Webpack，誰才是最強構建工具

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

vue.js , vite , webpack , 前端 , Javascript

收藏 評論

hyfhao 頭像

hyfhao - webpack多頁面打包的一次嘗試

初始化 cd 項目名 webpack init 創建第二頁面與其頭文件 touch page2.html touch src/page2.js 修改page2.js console.log("success") 修改webpack.config.js 添加page2.html至plugins項，添加src/page2.js至entry項 最終模板: const path = requi

webpack , HTML , Javascript , Web

收藏 評論

heath_learning 頭像

heath_learning - 手把手教你用webpack打包一個多個模塊且不包含共享模塊代碼的JS庫

1、什麼叫“多個模塊且不包含共享模塊代碼的JS庫”？ 假設你現在要在npm上發佈一個js庫，你的庫裏有module1.js、module2.js2個模塊，這2個模塊都依賴了hex.js工具模塊，如果使用普通的 打包模式打包module1.js、module2.js2個模塊，那麼module1.js、module2.js2個模塊中都會包含hex.js工具模塊，這會導致 在項目導入這2個模

打包 , webpack , js庫 , 模塊化開發 , Javascript

收藏 評論

ihengshuai 頭像

大衞talk - 前端主流構建工具

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

vite , nx.dev , rust , webpack , 前端

收藏 評論

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 = { // 工程化配置區域 } 二、核心配置參數解

vue.js , visual-studio-code , webpack , typescript , 前端

收藏 評論

ruochuan12 頭像

若川 - Taro 源碼揭秘：8. Taro 是如何使用 webpack 打包構建小程序的？

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

react , 小程序 , webpack , 前端 , Javascript

收藏 評論

ruochuan12 頭像

若川 - Taro 源碼揭秘：9. Taro 是如何生成 webpack 配置進行構建小程序的？

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

react , 小程序 , webpack , 前端 , Javascript

收藏 評論

ruochuan12 頭像

若川 - Taro 源碼揭秘：10. Taro 到底是怎樣轉換成小程序文件的？

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

react , 小程序 , webpack , 前端 , Javascript

收藏 評論

yuhuashi_584a46acea21f 頭像

雨花石 - webpack優化：提高二次構建速度

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

vue.js , vue-cli4 , webpack , 前端 , Javascript

收藏 評論

yuhuashi_584a46acea21f 頭像

雨花石 - webpack未轉譯第三方依賴axios為es5導致低端機型功能異常

背景： 兼容性測試流程中，遇到華為p9手機上的頁面按鈕點擊無反應的問題。開發者工具查看後發現報錯如下： 根據報錯信息檢查了一下頁面引用的vendors包，發現有...語法，來自於第三方依賴axios。 原因： axios包有es6語法，而我的項目的webpack.config.js配置的babel-loader排除了所有的node_modules的編譯。如下： {

babel-loader , Android , Axios , webpack , Javascript

收藏 評論

dirackeeko 頭像

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

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

webpack , 前端

收藏 評論

yuhuashi_584a46acea21f 頭像

雨花石 - review代碼系列（二）：

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

webpack , babel , 前端 , Javascript

收藏 評論