React服務端渲染之路07——添加CSS樣式
所有源代碼、文檔和圖片都在 github 的倉庫裏，點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—
昵稱 karuru
@webpack
貢獻者38
粉絲0
貢獻者
@webpack
動態 列表
【webpack系列】從核心概念到上手配置
前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它
昵稱 南玖
【webpack系列】從基礎配置到掌握進階用法
前言 本篇文章將介紹一些webpack的進階用法，演示內容繼承自上一篇文章的內容，所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容，會更有利於此篇的學習～ 文件指紋 文件指紋指的是打包輸出的文件名後綴，一般用來做版本管理、緩存等 webpack的指紋策略有三種：hash、chunkhash、contenthash，它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac
昵稱 南玖
詳解CommonsChunkPlugin的配置和用法
簡介 CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導致加載時間過長，着實是優化的一把利器。 先來説一下各種教程以及文檔中CommonsChunkPlugin提及到chunk有哪幾種，主要有以下三種： webpack當中配置的入口文件（entry）是chunk，可以理解為entry chunk
昵稱 Yanglinxiao
Webpack小技巧-公共組件引用路徑簡化
日常開發中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件，供不同地方使用，但是隨着項目不斷變大，項目目錄不斷變深，我們引用公共組件的路徑越來越長！ 例如：引用一個公共模塊 import Menu from '../../../../../components/Menu'; // 這裏路徑太深，很容易寫錯 我們該怎麼優化尼？ 解決方案1：使用webpack的resolve.alias屬性
昵稱 Nine
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
昵稱 前端陳晨
webpack配置看這裏就夠了
webpack簡述 webpack簡單來説就是一個模塊打包器，也是目前最流行的前端構建工具之一，他將整個項目根據依賴關係通過各種loader與plugin的處理後進行打包；可以實現對代碼的各種處理，比如less、sass、stylus的解析，ecmascript版本的轉換、代碼的壓縮分割等等 webpack之loader loader可以説是webpack最核心的部分，前面所説的各種功能大部分就是
昵稱 jm365
webpack
一、webpack是什麼？ webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。 webpack 的核心是 依賴分析,把依賴分析出來了，其他都是細枝末節了 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。 二、為什麼使用web
昵稱 草原的原
替代 webpack？一文帶你瞭解 snowpack 原理，你還學得動麼
近期，隨着 vue3 的各種曝光，vite 的熱度上升，與 vite 類似的 snowpack 的關注度也逐漸增加了。目前（2020.06.18）snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代碼很輕量，本文會從實現原理的角度介紹 snowpack 的特點。同時，帶大家一起看看，作為一個以原生 JavaScript 模塊化為核心的年輕的構建工具，它是如
昵稱 alienzhou
前端構建這十年
寫在前面 前端模塊化/構建工具從最開始的基於瀏覽器運行時加載的 RequireJs/Sea.js 到將所有資源組裝依賴打包 webpack/rollup/parcel的bundle類模塊化構建工具，再到現在的bundleless基於瀏覽器原生 ES 模塊的 snowpack/vite，前端的模塊化/構建工具發展到現在已經快 10 年了。 本文主要回顧 10 年間，前端模塊化/構建工具的發展歷程及
昵稱 李十三
【單頁面應用 】發版後如何【通知用户端更新】
【單頁面 】發版後如何【通知用户端更新】 現象描述： 首先技術棧,是vue全家桶技術棧。典型spa單頁應用，每次有新功能的上線，都需要主動通知，使用者自主刷新頁面【強刷】，才能出現新功能。 產生原因： 每次打包發版【代碼有變化】，index.html,網站即入口文件是變化的。 但是在單頁面應用，頁面跳轉，都在同一個瀏覽器線程中，不會再一次請求index.html 資源，即使你對
昵稱 方糖先生
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"
昵稱 路飛的笑
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.
昵稱 B͜a͜r͜a͜n͜
webpack項目中使用grunt監聽文件變動自動打包編譯
【小技巧】webpack項目中使用grunt監聽文件變動自動打包編譯 分享背景：編寫npm插件的時候，在項目裏的測試html文件內引用需要從入口文件轉譯打包成ES5。因此測試時每次改動都需要手動需要npm run build一下，很麻煩。獲知grunt有個watch功能，折騰了一下，可以做到每次js文件改動時自動build一波，很靈性。 安裝依賴包 //安裝grunt npm i grunt
昵稱 王林峯
Webpack與Grunt、Gulp的區別？
隨着前端發展如日沖天，前端項目也越來越複雜，得益於Nodejs的發展，前端模塊化、組件化、工程化也大勢所趨。這些年Grunt、Gulp到Webpack隨着工程化的發展都大行其道。 前端工程化的早期，主要是解決重複任務的問題。Grunt、Gulp就是其中代表。比如: 壓縮、編譯less、sass、地址添加hash、替換等。 Grunt官網中就説： 對於需要反覆重複的任務，例如壓縮（minificat
前端構建工具技術（介紹篇）
構建工具：俗稱打包。 理解：將模塊文件進行合併，代碼壓縮，整合資源等一系列自動化操作。 為什麼會出現構建工具這項技術？ 我們希望看到頁面加載平滑，快速進行響應。 通過： 1.編寫代碼的邏輯，避免無效浪費內存資源，即優化代碼； 2.優化瀏覽器請求資源的速度； 原因： 首先瀏覽器加載資源 請求的文件數量越多越耗時，文件容量越大越耗時。但是為了我們前端項目結構清晰，我們一般會分成
昵稱 XiaoYu
使用Workbox創建PWA應用
前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽
昵稱 悖論BeilunYang
node後端（koa）如何打包加密，以及node_modules如何優化？
用node開發後端會存在那些問題呢？在我們用node做後端開發遇到的三個問題。一安全問題，代碼並沒有編譯就直接傳遞了，只要進去服務器代碼可以看得一清二楚。二是文件體積問題，隨便一個項目node_modules件包就是一百兆左右。第三個是部署問題，每次部署新項目都要下載安裝插件導致部署非常緩慢。 我們又有哪些解決方案呢？首先我們來看一下最重要的安全問題，node沒有像java做好之後可
昵稱 李小貴
解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題
前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時，通常會遇到一個很麻煩的問題，即我們無法提前獲取到當前頁面所需的資源，從而不能提前加載當前頁面所需的 CSS，導致客户端在獲取到服務端渲染的 HTML 時，得到的只有 HTML 文本而沒有 CSS 樣式，之後需要等待一會兒才能將 CSS 加載出來，也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐，可以參考：
昵稱 EsunR
Webpack的誕生與問題解決之道
背景 在早期的前端技術標準根本沒有預料到前端行業會有今天的發展，在設計上存在很多缺陷，隨着web應用複雜性增加，網頁已經從展示簡單的文案和圖像逐漸演變為功能複雜、交互密集的應用程序，這種變化推動了前端模塊化的發展，以應對以下幾個挑戰： 依賴管理混亂 全局作用域污染 代碼膨脹 舉個例子來説明下： !DOCTYPE html html lang="en" head meta ch
昵稱 Tqing
你的項目切換代理需要重啓嗎？
問題 參與過多人項目之後，總是會碰到下面的問題。 需要跟另一個人對接了，那麼就要把代理的target改成他的ip地址，改完還得重啓項目。 別人把配置文件的代碼提交了，覆蓋了我的target配置。又得改回來，再次重啓項目。 有可能配置文件的代碼是這樣的 module.exports = { devServer:{ proxy:{ '/api':{
昵稱 我是好人
webpack dev server 與 hot module replace 提高開發效率
通過 webpack 命令編譯源代碼時，如果我們對源代碼進行了修改，需要重新執行命令才能看到編譯後的效果。 這樣在開發中非常的影響效率，如果存在一種方式，當文件被修改時，webpack 自動監聽重新編譯，並反饋給開發者，這樣就能更高效的進行開發。 watch 我們通過 webpack 執行命令時，編譯完成之後進程會停止，而 webpack --watch 編譯完成後，不會停止進程，並且當文件內容發
昵稱 一顆冰淇淋
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
昵稱 咖啡教室
抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細緻排查過程
事情的起因是這樣的，在一個已上線的項目中，其中一個包含登錄和獲取菜單的接口因響應時間較長，後端讓我嘗試未經服務轉發的另一域名下的新接口，舊接口允許跨域請求，但新接口不允許本地訪問（只允許發佈測試/生產的域名訪問）。 問題 那麼問題來了，本地環境該如何成功訪問到新的接口並驗證業務功能是否生效呢？ 嘗試過程 我首先就想到了直接在 webpack 項目中配置 devServer，並且修改接口地址
昵稱 一顆冰淇淋