动态

详情 返回 返回

SegmentFault 思否技術週刊 Vol.52 -- 這份 Webpack 有點料! - 动态 详情

Webpack 是一個前端資源加載/打包工具,只需要相對簡單的配置就可以提供前端工程化需要的各種功能。

文章推薦

《Webpack 拆包:關於 splitChunks 的幾個重點屬性解析》

從分析圖中可以比較直觀的看出,三個輸出 bundle 文件中都包含了 m1.js 文件,這説明有重複的模塊代碼。splitChunks 的目的就是用來把重複的模塊代碼分離到單獨的文件,以異步加載的方式來節省輸出文件的體積。splitChunks 的配置項很多而且感覺官方文檔的一些描述不是很清楚,下面通過一些重點配置屬性和場景解釋來幫助大家理解和弄懂如何配置 splitChunks。為方便理解和簡單演示,Webpack 和 splitChunks 的初始設置如下

《用前端構建工具打包後端服務,我到底經歷什麼》

看到這個 標題,是的,我本是個後端,最近要寫點 node.js, 之前寫前端,知道 npm build 一下,那麼用 javascript 寫的後端程序也要 npm build 吧,好的,作為個 gopher , 帶着對 javascript 的刻板印象就開幹了。
我本 gopher,奈何沒有一個會前端的老婆,就自己幹前端了,如果幹的不對,請及時糾正

《Webpack 基礎配置與css相關loader》

本系列文章是我在學習 Webpack 時的總結與收穫,希望我的一些學習內容可以幫助到一些正在學習 Webpack 的朋友。本片文章為系列文章的第二篇,包含 Webpack 基礎配置與 css 相關 loader

《用 Webpack 從0到1打包一個按需加載的vue組件庫》

在vue項目開發中,我們會將經常用到的邏輯或模塊抽象成組件,對於那些多個項目都有用到的組件,可以考慮封裝成組件庫,發佈到npm。每次要到只需要npm install xx一下,就不用來回拷貝了。下面我們就從0開始來打包一個vue組件庫。

《 Webpack 打包時如何修改文件名》

在使用 Webpack 進行項目打包的時候,我們可通過以下方式對不同類型的資源,進行文件名或文件路徑的修改

《在 Webpack 中這樣分離環境和代碼就好啦》

環境分離主要是區分本地和生產兩種環境,本地調試需要能實時看到代碼變化,而生產環境需要編譯成指定的文件。
可以採用兩種方式
開發環境和生產環境分別定義配置文件,在 package.json 中定義對應的指令
開發環境和生產環境共用配置文件,通過參數來區分環境

《其實 Webpack 編譯"模塊化"的源碼沒那麼難》

瀏覽器不支持 CommonJS ,在特定場景下才支持 Es Module ,而 Webpack 可以將這些模塊化的代碼解析成瀏覽器可識別的語法。那麼 Webpack 究竟是對模塊化做了怎樣的處理呢?一起來看看。

《深度解析 Webpack 5持久化緩存》

持久化緩存是 Webpack 5 所帶來的非常強大的特性之一。一句話概括就是構建結果持久化緩存到本地的磁盤,二次構建(非 watch 模塊)直接利用磁盤緩存的結果從而跳過構建過程當中的 resolve、build 等耗時的流程,從而大大提升編譯構建的效率。

《「基礎搭建」從零開始,基於 Webpack 5 搭建一個 Vue-Cli 》

大家平時在進行Vue開發的時候,大部分人都是使用 Vue-cli 這個現成的Vue腳手架來進行開發的,但是用它用了這麼久,你難道不想自己搭一個屬於自己的 Vue-cli 嗎?
今天我就帶大家來搭建一個基本的 Vue-cli ,也可以讓大家對 Webpack 有更深入的瞭解!建議大家一定要跟着我一步一步來哦!
事先説明:本文只介紹vue-cli基本配置,關於優化、規範這兩方面,我後面會再寫兩篇文章進行講解

《 Webpack 打包js文件的分析》

在使用 Webpack 中的項目的時候,我們可以使用 esModule,也可以使用 commonJS,還可以使用 import(moduleName) 進行模塊的懶加載,那麼這一切 Webpack 是怎麼做到的呢?

問答推薦

  • 如何將前端頁面部署到服務器讓外部客户訪問到
  • 通過 WebpackDevServer 配置 https 啓動項目後,想取消 https 要怎麼配置
  • 求大佬幫助,vue 項目在 public 下放入過多圖片資源導致運行或打包時報錯: too many open files
  • 如何使用 Webpack 處理特殊文件,比如xx.lock文件
  • Webpack 熱更新 編譯出錯。
  • 如何通過 Webpack 或 rollupjs 加密代碼使 nodejs 模塊私有?
  • vue的項目源碼丟了,目前得到了 Webpack 打包後文件,怎麼解析到源碼?
  • Webpack 如何打包成一個js
  • Webpack 項目跑起來之後,取不到.env中的配置,progress is not defined
  • Webpack 打包favicon.ico打不進去,線上引用不到?

PS:大家想看哪些方面的技術內容,可以在評論區留言喔 ~
如有問題可以添加小姐姐微信~
image.png

user avatar soroqer 头像 shuirong1997 头像 gouguoyin 头像 shine_zhu 头像 nanchengfe 头像 ohaha 头像 aiyaotoudedianfengshan 头像 tsteam 头像 wupeng_5a4de5c290b9d 头像 headofhouchang 头像 phpnan 头像 ahfuzhang 头像
点赞 13 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.