tag webpack

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

yanglinxiao 頭像

Yanglinxiao - 詳解CommonsChunkPlugin的配置和用法

簡介 CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導致加載時間過長，着實是優化的一把利器。 先來説一下各種教程以及文檔中CommonsChunkPlugin提及到chunk有哪幾種，主要有以下三種： webpack當中配置的入口文件（entry）是chunk，可以理解為entry chunk

webpack3 , webpack , webpack2

收藏 評論

nine_59f82397ef519 頭像

Nine - Webpack小技巧-公共組件引用路徑簡化

日常開發中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件，供不同地方使用，但是隨着項目不斷變大，項目目錄不斷變深，我們引用公共組件的路徑越來越長！ 例如：引用一個公共模塊 import Menu from '../../../../../components/Menu'; // 這裏路徑太深，很容易寫錯 我們該怎麼優化尼？ 解決方案1：使用webpack的resolve.alias屬性

webpack3 , webpack , webpack入門 , webpack2 , 前端

收藏 評論

huansheng 頭像

前端陳晨 - webpack2-3基本配置

const path = require('path') const webpack = require('webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin') var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports

webpack3 , webpack , webpack2

收藏 評論

jm365 頭像

jm365 - webpack配置看這裏就夠了

webpack簡述 webpack簡單來説就是一個模塊打包器，也是目前最流行的前端構建工具之一，他將整個項目根據依賴關係通過各種loader與plugin的處理後進行打包；可以實現對代碼的各種處理，比如less、sass、stylus的解析，ecmascript版本的轉換、代碼的壓縮分割等等 webpack之loader loader可以説是webpack最核心的部分，前面所説的各種功能大部分就是

webpack , 模塊化開發

收藏 評論

sishuiliunian_58b84718ea5de 頭像

跑碼 - Webpack與Grunt、Gulp的區別？

隨着前端發展如日沖天，前端項目也越來越複雜，得益於Nodejs的發展，前端模塊化、組件化、工程化也大勢所趨。這些年Grunt、Gulp到Webpack隨着工程化的發展都大行其道。 前端工程化的早期，主要是解決重複任務的問題。Grunt、Gulp就是其中代表。比如: 壓縮、編譯less、sass、地址添加hash、替換等。 Grunt官網中就説： 對於需要反覆重複的任務，例如壓縮（minificat

gulp , grunt , webpack

收藏 評論

yuan_life 頭像

草原的原 - webpack

一、webpack是什麼？ webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。 webpack 的核心是 依賴分析,把依賴分析出來了，其他都是細枝末節了 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。 二、為什麼使用web

webpack , 模塊化開發

收藏 評論

karuru 頭像

karuru - React服務端渲染之路07——添加CSS樣式

所有源代碼、文檔和圖片都在 github 的倉庫裏，點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—

react-dom , react , react-router4 , webpack , Css

收藏 評論

b_a_r_a_n 頭像

B͜a͜r͜a͜n͜ - webpack.01-簡單使用

webpack官網：https://webpack.js.org/ 全局安裝webpack cnpm i -g webpack webpack-cli 創建index.js console.log('hellowebpack')//示例：建議寫es5語法可正常運行，es6需要babel後面做筆記會寫 cmd運行 webpack index.js//------生成文件夾dist，生成文件main.

webpack , es5 , npm , Javascript

收藏 評論

alienzhou 頭像

alienzhou - 替代 webpack？一文帶你瞭解 snowpack 原理，你還學得動麼

近期，隨着 vue3 的各種曝光，vite 的熱度上升，與 vite 類似的 snowpack 的關注度也逐漸增加了。目前（2020.06.18）snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代碼很輕量，本文會從實現原理的角度介紹 snowpack 的特點。同時，帶大家一起看看，作為一個以原生 JavaScript 模塊化為核心的年輕的構建工具，它是如

構建工具 , webpack , 模塊化開發 , 前端 , Javascript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - Vue項目打包完後如何自動上傳至服務器

寫在開頭 我先説下一下，為啥要寫這個，由於之前在寫不見面開標5.0系統，修改完bug後，然後前端通過npm run build打包後生成文件，然後在通過FTP工具上傳至服務器，整個過程，我還需要手動拷貝到服務器，如果一天打包好幾次，就要手動拷貝好幾次，非常繁瑣 前端部署項目方案 前端部署 通過npm run build，構建前端靜態資源文件 只需上傳構建後的資源文件，然後上傳至服務器指

前端構建 , vue.jswebpackvuegridlayout , webpack

收藏 評論

beilunyang 頭像

悖論BeilunYang - 使用Workbox創建PWA應用

前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽

pwa , webpack , 前端 , Javascript

收藏 評論

ethanprocess 頭像

EthanProcess - 我是如何在 Vue 項目中做代碼分割的

通常為了開發效率，我們會使用 vue-cli 創建項目，這樣創建的項目默認情況下編譯是會對代碼進行分割的。但是如果是自行配置的 webpack 環境的話，還是很有必要熟悉代碼分割的相關知識的。 為什麼要做代碼分割 在配置 webpack 的過程中，很多時候我們的 webpack 入口只寫了一個 entry: '${sourceDir}/index.js’，默認情況下只會生成一個 bundle 文件

vue.js , 前端優化 , webpack , 前端

收藏 評論

fangtangxiansheng 頭像

方糖先生 - 【單頁面應用 】發版後如何【通知用户端更新】

【單頁面 】發版後如何【通知用户端更新】 現象描述： 首先技術棧,是vue全家桶技術棧。典型spa單頁應用，每次有新功能的上線，都需要主動通知，使用者自主刷新頁面【強刷】，才能出現新功能。 產生原因： 每次打包發版【代碼有變化】，index.html,網站即入口文件是變化的。 但是在單頁面應用，頁面跳轉，都在同一個瀏覽器線程中，不會再一次請求index.html 資源，即使你對

webpack , spa , Javascript

收藏 評論

wszgrcy 頭像

wszgrcy - [Angular]單運行時多項目共享依賴方案

ngx-center 一箇中心,多個...... 使用介紹(視頻) 這是什麼? 一個 Angular 單運行時多項目共享依賴的解決方案 只啓動一個 Angular 平台(PlatformRef),其他子項目進行導出(類 es6 module),通過資源文件清單(或單獨 js 文件)進行請求加載 功能 支持子項目在開發時代碼變更的刷新 支持子項目調用主項目導出的命名(e

angular , webpack , angular2 , typescript , Javascript

收藏 評論

bianchengsanmei 頭像

編程三昧 - Webpack 簡介

構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。 Webpack 憑藉強大的功能與良好的使用體驗，已經成為目前最流行，社區最活躍的構建工具，是現代 Web 開發必須掌握的技能之一。 背景 在當下的前端環境裏，各種框架和工具層出不窮，比如 React、Vue、Angular 等，極大

構建工具 , 前端構建 , 工程化 , webpack , 前端

收藏 評論

golgif 頭像

arzyu - 使用 airpack 讓多個項目共享 webpack 配置

airpack 是一個 webpack-cli 的包裝器。旨在讓你更優雅的使用 webpack。 airpack 在 node 加載 webpack-cli 模塊時，給 webpack-cli 打上功能增強補丁。這個補丁讓 webpack-cli 能按一定的優先級順序自動從多個位置（項目依賴、項目目錄、命令行參數）讀取 webpack 配置，然後用更合適的方式合併這些 webpack 配置。 使用

前端構建 , webpack

收藏 評論

lishisan 頭像

李十三 - 前端構建這十年

寫在前面 前端模塊化/構建工具從最開始的基於瀏覽器運行時加載的 RequireJs/Sea.js 到將所有資源組裝依賴打包 webpack/rollup/parcel的bundle類模塊化構建工具，再到現在的bundleless基於瀏覽器原生 ES 模塊的 snowpack/vite，前端的模塊化/構建工具發展到現在已經快 10 年了。 本文主要回顧 10 年間，前端模塊化/構建工具的發展歷程及

構建工具 , vite , webpack , 模塊化開發 , 前端

收藏 評論

taoguo 頭像

我是好人 - 你的項目切換代理需要重啓嗎？

問題 參與過多人項目之後，總是會碰到下面的問題。 需要跟另一個人對接了，那麼就要把代理的target改成他的ip地址，改完還得重啓項目。 別人把配置文件的代碼提交了，覆蓋了我的target配置。又得改回來，再次重啓項目。 有可能配置文件的代碼是這樣的 module.exports = { devServer:{ proxy:{ '/api':{

webpack-dev-server , 代理 , webpack , vue-cli , 前端

收藏 評論

recordyu 頭像

XiaoYu - 前端構建工具技術（介紹篇）

構建工具：俗稱打包。 理解：將模塊文件進行合併，代碼壓縮，整合資源等一系列自動化操作。 為什麼會出現構建工具這項技術？ 我們希望看到頁面加載平滑，快速進行響應。 通過： 1.編寫代碼的邏輯，避免無效浪費內存資源，即優化代碼； 2.優化瀏覽器請求資源的速度； 原因： 首先瀏覽器加載資源 請求的文件數量越多越耗時，文件容量越大越耗時。但是為了我們前端項目結構清晰，我們一般會分成

vite , 瀏覽器 , grunt , webpack , 前端

收藏 評論

lufeidexiao 頭像

路飛的笑 - webpack打包js文件的分析

在使用webpack中的項目的時候，我們可以使用esModule，也可以使用commonJS，還可以使用import(moduleName)進行模塊的懶加載，那麼這一切webpack是怎麼做到的呢？ 1、準備工作 1.1、 使用webapck@4 webpack-cli@3 "html-webpack-plugin": "4", "webpack": "4", "webpack-cli": "3"

es6module , commonjs , webpack

收藏 評論

asmallwhitecat 頭像

華仔 - 【包真】我的第一次webpack優化，首屏渲染從9s到1s

大家好，我是貓小白，本文基於vue2，全文閲讀大約需要3分鐘。 談到webpack優化大部分人可能都看膩了，無非就那幾招嘛，我之前也是看過許多類似的文章，但都沒有自己真正上手過，下面是我用公司的項目真實操練下來的，首屏加載速度提升很大（刷刷的），希望能幫到你。 廢話不多説，先看看對比成果！ 類型 優化前 優化後 js文件大小

前端優化 , webpack , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - webpack dev server 與 hot module replace 提高開發效率

通過 webpack 命令編譯源代碼時，如果我們對源代碼進行了修改，需要重新執行命令才能看到編譯後的效果。 這樣在開發中非常的影響效率，如果存在一種方式，當文件被修改時，webpack 自動監聽重新編譯，並反饋給開發者，這樣就能更高效的進行開發。 watch 我們通過 webpack 執行命令時，編譯完成之後進程會停止，而 webpack --watch 編譯完成後，不會停止進程，並且當文件內容發

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

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp使用指南

gulp 是一個使用“流”來實現自動化的工具，正如 官方文檔 首頁展示的這副動圖一樣，以“流動”的狀態去處理 TypeScript、PNG、Markdown 資源。 與webpack比較 類別 webpack gulp 核心理念 module bundler task runner 執行任務 模塊化

gulp , webpack , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp來處理html、css、js資源啦

gulp 一般用於處理自動化任務，默認情況無法處理模塊化，也不會用於大型項目，但它可以使用各種插件來編譯 html、css、js 等資源。 不清楚如何使用 gulp 開啓任務的朋友可以參考 gulp使用指南 處理html 處理 html 資源使用到 gulp-htmlmin 這個插件，和 webpack中使用到的html-webpack-plugin 比較相似。 // gulpfile.js co

gulp , gulp-babel , webpack , 前端 , Javascript

收藏 評論