Webpack 是一個前端資源載入/打包工具，只需要相對簡單的配置就可以提供前端工程化需要的各種功能。
文章推薦
《Webpack 拆包：關於 splitChunks 的幾個重點屬性解析》
從分析圖中可以比較直觀的看出，三個輸出 bundle 檔案中都包含了 m1.js 檔案，這說明有重複的模組程式碼。splitChunks 的目的就是用來把重複的模組程式碼分離到單獨的檔案，以非同步載入的方式來節省輸出檔案的體積。splitChunks 的配置項很多而且感覺官方文件的一些描述不是很清楚，下面通過一些重點配置屬性和場景解釋來幫助大家理解和弄懂如何配置 splitChunks。為方便理解和簡單演示，Webpack 和 splitChunks 的初始設定如下
看到這個 標題，是的，我本是個後端，最近要寫點 node.js， 之前寫前端，知道 npm build 一下，那麼用 javascript 寫的後端程式也要 npm build 吧，好的，作為個 gopher ， 帶著對 javascript 的刻板印象就開幹了。
我本 gopher，奈何沒有一個會前端的老婆，就自己幹前端了，如果幹的不對，請及時糾正
本系列文章是我在學習 Webpack 時的總結與收穫，希望我的一些學習內容可以幫助到一些正在學習 Webpack 的朋友。本片文章為系列文章的第二篇，包含 Webpack 基礎配置與 css 相關 loader
《用 Webpack 從0到1打包一個按需載入的vue元件庫》
在vue專案開發中，我們會將經常用到的邏輯或模組抽象成元件，對於那些多個專案都有用到的元件，可以考慮封裝成元件庫，釋出到npm。每次要到只需要npm install xx一下，就不用來回拷貝了。下面我們就從0開始來打包一個vue元件庫。
在使用 Webpack 進行專案打包的時候，我們可通過以下方式對不同型別的資源，進行檔名或檔案路徑的修改
環境分離主要是區分本地和生產兩種環境，本地除錯需要能實時看到程式碼變化，而生產環境需要編譯成指定的檔案。
可以採用兩種方式
開發環境和生產環境分別定義配置檔案，在 package.json 中定義對應的指令
開發環境和生產環境共用配置檔案，通過引數來區分環境
瀏覽器不支援 CommonJS ，在特定場景下才支援 Es Module ，而 Webpack 可以將這些模組化的程式碼解析成瀏覽器可識別的語法。那麼 Webpack 究竟是對模組化做了怎樣的處理呢？一起來看看。
持久化快取是 Webpack 5 所帶來的非常強大的特性之一。一句話概括就是構建結果持久化快取到本地的磁碟，二次構建(非 watch 模組)直接利用磁碟快取的結果從而跳過構建過程當中的 resolve、build 等耗時的流程，從而大大提升編譯構建的效率。
《「基礎搭建」從零開始，基於 Webpack 5 搭建一個 Vue-Cli 》
大家平時在進行Vue開發的時候，大部分人都是使用 Vue-cli 這個現成的Vue腳手架來進行開發的，但是用它用了這麼久，你難道不想自己搭一個屬於自己的 Vue-cli 嗎？
今天我就帶大家來搭建一個基本的 Vue-cli ，也可以讓大家對 Webpack 有更深入的瞭解！建議大家一定要跟著我一步一步來哦！
事先說明：本文只介紹vue-cli基本配置，關於優化、規範這兩方面，我後面會再寫兩篇文章進行講解
在使用 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：大家想看哪些方面的技術內容，可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~