后端視野學 Webpack ，文武雙全？
大家好，我是小菜。一個希望能夠成為 吹著牛X談架構 的男人!如果你也想成為我想成為的人，不然點個關注做個伴，讓小菜不再孤單!
本文主要介紹 Webpack 使用
如有需要，可以參考
前端認知
挺多人對前端開發是存在一定的誤解的，感覺會點 H5 + C3 + JS 就等于會前端開發，但近幾年前后端分離的模式逐漸流行起來，就說明前端早已沒有之前那么簡單。
站在我這個后端的視角上倒覺得， 前端是個文官，后端是個武將，不能說做到能文能武，但起碼求武的同時不能不識一丁，退一兩步來說，當前端實習妹子遇到 Bug 束手無措的時候，你這偽境前端若能出手相助~那在她人眼中你就是一位 '架著七彩祥云而來的蓋世英雄~'
如果說你會 Bootstrap 加上 Layui，那么就說你會前端，難免會被人拍死在沙灘上~ 實際上的前端開發是由以下幾個模塊組成：
- 模塊化(js 的模塊化，css 的模塊化，資源的模塊化)
- 組件化(復用現有的 UI 結構，樣式，行為)
- 規范化(目錄結構的劃分、編碼規范化、接口規范化、文檔規范化、Git分支管理)
- 自動化(自動化構建、自動部署、自動化測試)
與后端如出一轍，該有的模塊都有。
說到工程化，在后端開發中存在主流的解決方案有 Maven 工程 和 Gradle 工程。前端工程化解決方案也有 webpack 和 vite。那么就進入我們今天的正題，走進 Webpack
Webpack
一、概念認知
本質上，webpack 是一個用于現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部從一個或多個入口點構建一個依賴圖，然后將你的項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用來展示你的內容。
以上內容摘于官網，官里官氣的。下面我們簡單概括一下
- 概念總結：webpack 是前端項目工程化的具體解決方案
- 功能總結：
提供了友好的前端模塊化開發的支持
提供了代碼壓縮混淆、處理瀏覽器兼容Js、以及性能優化等強大功能
- 優點總結：提高了前端開發效率和項目的可維護性
二、基本使用
實踐出真知!我們直接使用來加強認識。
首先我們需要創建一個空白目錄，然后在空白目錄中執行 npm init -y 來初始化包管理配置文件 package.json
可以簡單理解為這個 package.json 就相當于 maven 工程中的 pom.xml 文件
在 Maven 工程中我們通常上都是把源代碼放在 src 目錄底下，該 webpack 工程類似，因此我們下一步便是在該目錄下創建 src 目錄，繼而創建兩個文件 index.html (首頁) 和 index.js (腳本文件)
我們傳統上要引入 Jquery 文件，一般有兩種方式
- 一種是下載 jquery.mini.js 文件，然后在項目中引入
- <script src="../js/jquery.js"></script>
- 一種是引用網上現成的 CDN 庫，這樣可以不用下載
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
兩種方式各有優劣，這里不做過多說明!
既然我們該項目是使用 npm 初始化的，那我們便可以使用 npm 來幫我們下載好所需要的包
- npm install jquery -s
添加成功后我們可以在 package.json 文件中看到我們剛剛下載的包，這種方式有沒有讓你回想到 maven 的 maven install 命令，這種奇怪的熟悉感~
等 jquery 包安裝完成后，我們就可以在 node_modules 目錄下查看到剛剛安裝的包
然后在項目中進行引用
瀏覽器查看 JS 運行正常
以上方式也是傳統的引包方式，跟 webpack 仍是沒有半點關系。接下來我們就來看看 webpack 是如何使用的。
1、webpack 安裝
在終端中運行如下命令，安裝與 webpack 相關的兩個包：
- npm install webpack@5.42.1 webpack-cli@4.7.2 -D
擴展
- npm install xxx -S，也就是 npm install module_name --save 寫入dependencies
- npm install xxx -D，也就是 npm install module_name --save-dev寫入devDependencies
devDependencies ，是我們開發的時候需要用到的一些包，只需要用于開發階段，真正打包上線的時候并不需要這些包，dependencies，這個則是需要發布到生產環境中的。
2、webpack 配置
我們需要在項目的根目錄中，創建一個名為 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
- module.exports = {
- mode: "development"
- }
其中的 mode 是個可變值，存在兩個可選值
- development
1、 適用于開發環境
2、不會對打包生成的文件進行代碼壓縮和性能優化
3、打包速度快，適合在開發階段使用，能夠快速響應頁面的更改
- production
1、適用于生產環境
2 、會對打包生成的文件進行代碼壓縮和性能優化
3、打包速度很慢，僅適合在項目發布階段使用
1)配置文件的作用
webpack.config.js 是 webpack 的配置文件，webpack 在真正開始打包構建之前，會 先去讀取這個配置文件，從而基于給定的配置，對項目進行打包
由于 webpack 是基于 node.js 開發出來的打包工具，因此在它的配置文件中是支持 node.js 相關的語法和模塊進行 webpack 個性化配置的
然后我們這里先打個 載入點① ，先回到剛剛說到的 webpack 使用，等會再回來介紹 webpack!
在Java中有句熟悉的話：萬物皆對象 ，因此在前端工程中我們同樣有句話：萬物皆模塊
我們已經不需要傳統的 js 導入方式：
- <script src="../node_modules/jquery/dist/jquery.min.js"></script>
我們可以在有需要 jquery 的地方使用 import 的方式導入，jquery 是頁面 index.html 需要的嗎?并不是，而是 index.js 腳本文件需要，所以我們只需要在 index.js 文件中導入
然后我們還需要修改 package.json 文件：
我們新增了 dev 腳本 ，在 script 節點下的腳本，可以通過 npm run 執行。
然后我們在終端上運行 npm run dev 命令，啟動 webpack 進行項目的打包構建
啪一下，很快啊!就在項目目錄中生成了一個 dist 目錄，并存在 main.js 腳本文件
我們繼而在 index.html 文件中引入該 main.js 文件，先直接看結果，我們右鍵在瀏覽器打開
可以發現，js 運行正常，那么 main.js 是啥玩意?
在 **webpack 4.x 和 5.x ** 的版本中有如下默認約定：
- 默認的打包入口文件為 src/index.js
- 默認的輸出文件路徑為 dist/main.js
規定是die的，人是活的，因此我們可以在 webpack.config.js 中修改打包的默認約定!
既然了解了約定，因此我們就可以知道在 main.js 中包含了 index.js 內容，我們可以直接查看 main.js 文件，結果如我們所料：
我們回到之前的 載點① 繼續剛剛 webpack.config.js 配置文件的說明
我們在 webpack.config.js 文件中可以通過 entry 節點指定打包的入口，然后通過 output節點指定打包的出口。
這就是我們上面所說的打破默認規則!
上面我們也說完了 webpack 的基本使用，那我們下面就來看看 webpack 中的插件使用
三、插件使用
插件 顧名思義就是用來擴展 webpack 的功能，通過安裝和配置第三方的插件，可以擴展 webpack 的能力，從而讓 webpack 使用起來更加方便。最常用的 webpack 有兩個：
- webpack-dev-server
1、類似于 node.js 階段用到的 nodemon 工具
2、每當修改了源代碼，webpack 會自動進行項目的打包和構建
- html-webpack-plugin
1、類似于一個模板引擎
2、可以通過此插件自定制 index.html 頁面中的內容
我們先來看如何使用第一個插件
1)webpack-dev-server
webpack-dev-server 可以讓 webpack 監聽項目源代碼的變化，從而進行自動打包構建
① 安裝
使用以下命令即可在項目中安裝該插件
- npm install webpack-dev-server@3.11.2 -D
② 配置
1、需要修改 package.json 中的 script
- "scripts": {
- "dev": "webpack server"
- }
2、運行 npm run dev 命令
可以看到一句話：項目正在運行于 localhost:8080/ 。并且運行后并沒有出現 dist 目錄
然后我們通過該地址訪問卻沒有看到我們想要的頁面，而是需要點擊 src 目錄才能訪問
根據以上結果，我們可能有如下疑問：
- 為什么運行 npm run dev 會出現了一個訪問地址呢?
這是因為 webpack-dev-server 會啟動一個 實時打包的 http 服務器
- 打包生成的文件在哪?
想要解答這個問題，我們就得需要知道兩點 - 配置和不配置 webpack-dev-server 的區別
1、不配置 webpack-dev-server 的情況下，webpack 打包生成的文件，會存放到實際的物理磁盤上(根據 output 指定路徑進行存放)
2、配置 webpack-dev-server 的情況下，打包生成的文件會存放到內存上，不再根據 output 節點指定的路徑存放，這樣的好處是提高了實時打包輸出的性能，因此內存比物理磁盤速度快很多
- 生成到內存中的文件該如何訪問?
生成到內存中的文件，默認是放到了項目的根目錄中，但是是虛擬不可見的，我們可以直接用 / 表示項目根目錄，后面跟上要訪問的文件名稱， 即可訪問內存中的文件。
以三個問題收尾，我們來說下一個插件 html-webpack-plugin
2)html-webpack-plugin
我們上面通過訪問 webpack server 給定的 URL 地址，發現不能直接訪問到我們的 index 頁面，這難免有些缺陷，有缺陷自然就會有改進，這就可以聊到 html-webpack-plugin 這個插件了~!
① 安裝
老樣子，我們需要通過以下命令進行安裝
- npm install html-webpack-plugin@5.3.2 -D
② 配置
③ 運行
我們通過運行 npm run dev ，然后看結果
通過該插件，我們可以看到已經可以直接通過路徑訪問該頁面~
這里有小伙伴可能會提出問題，如果我不想通過 8080 端口可以嗎，甚至不想通過 localhost 訪問可以嗎?答案是可以的，我們可以通過 devServer 節點 對 webpack-dev-server 插件進行更多的配置：
- devServer: {
- // 首次打包成功后，自動打開瀏覽器
- open: true,
- // 在 http 協議中，如果端口號是 80，則可以被省略
- port: 8081,
- // 指定運行的主機地址
- host: '127.0.0.1'
- },
然后我們運行項目后通過 127.0.0.1:8081 訪問頁面：
到這里我們就已經介紹了兩個插件的使用，接下來我們將看點不一樣的東西~!
四、loader使用
我們在開頭的時候已經說過一句話，在前端工程化中，萬物皆模塊。因此我們可以在 index.js 腳本文件中通過 import 的方式導入 jquery js文件。那遇到 css 文件是否一樣能夠通過 import 導入?我們不妨一試：
當我們想要通過 import 的方式導入該 css文件，控制臺卻給了我們一句話 ：你可能需要一個適當的loader來處理這種文件類型，適當的?loader?。那就進入正題，什么是 loader!
在實際開發過程中，webpack 默認只能打包處理以 .js 后綴名結尾的模塊。其他非 .js 后綴名結尾的模塊，webpack 是處理不了，也就是會出現我們上面的那種情況，但怎么處理呢?就需要像提示文本所說的那樣，我們需要下載一個適當的 loader 來處理這種文件類型。
loader 加載器有許多種，但它們的作用就只有一個，那就是 幫助 webpack 來打包處理特定的文件模塊
- css-loader：可以打包處理 .css 相關的文件
- less-loader：可以打包處理 .less 相關的文件
- babel-loader： 可以打包處理 webpack 無法處理的高級 JS 語法
接下來我們就來處理上面遇到 css 導包的問題
① 安裝
通過以下命令來安裝處理 css 文件的 laoder
- npm i style-loader@3.0.0 css-loader@5.2.6 -D
② 配置
我們需要在 webpack .config.js 文件中配置相應的 loader 規則
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- ]
- }
③ 運行
繼而我們運行文件，瀏覽器看效果
該結果已經說明了 css-loader 已經起到作用了。我們看下規則的編寫方式是怎么樣的：
- { test: /\.css$/, use: ['style-loader', 'css-loader'] }
其中 test 表示匹配的文件類型， use 表示對應要調用的 loader
- use 數組中的 loader 順序是固定的
- 多個 loader 的調用順序是 從后往前調用
其它loader的使用方式與上面一致，都是需要先安裝，然后在 webpack.config.js 文件中配置
1)less-loader
安裝
- npm i less-loader@10.0.1 less@4.1.1 -D
配置
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- // 處理 .less 文件的 loader
- { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
- ]
- }
2)babel-loader
安裝
- npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
配置
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- // 處理 .less 文件的 loader
- { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
- // 處理JS高級語法的 loader
- { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- ]
- }
上面我們看到幾種 loader 的作用，那么其中處理流程是怎么樣的呢?我們用張圖解釋下：
五、打包發布
完成以上項目開發后，我們就要來到 打包發布 的階段，前面所做的一切，到最后肯定都是需要發布的，那么為了能讓項目在生產環境中高性能運行，就需要對項目打包發布。
① 配置
打包發布同樣需要配置，我們需要在 package.json 文件下的 script 節點 進行配置：
其中 --model 是一個參數項，用來指定 webpack 的運行模式，我們在上面已經介紹過了~然后通過指令 npm run build，我們就可以在項目的根路徑下看到我們熟悉的 dist 目錄了
但是如果沒有指定的規則配置，默認會將打包后的文件都放到 dist 目錄下，但是如果我們想要將 js 文件 放到 js目錄下，image 文件放到 image 目錄下 我們就需要在 webpack.config.js 進行相應的配置
前面我們 js 文件的生成目錄已經通過 output 節點 進行配置了
那么我們還需要配置其他文件的輸出目錄，這里以圖片類型的文件為例：
我們同樣是在 webpack.config.js 文件中配置，不過此時是在 rules 節點 中進行配置：
進行到這步我們已經差不多完成了打包任務，但是我們如果更改了 js 生成目錄，這個時候會發生什么呢?
我們發現會生成冗余的文件，并沒有把舊文件刪除，這難道每次打包都要進行手動刪除嗎?當然不是!為了在每次打包發布時 自動清理掉 dist 目錄中的舊文件，可以安裝并配置 clean-webpack-plugin 插件
安裝
npm install clean-webpack-plugin@3.0.0 -D
配置
運行
六、Source Map
這種 Source Map 就有點意思了，我們后端上線后，如果出現問題，我們通常會進入到服務器中查看報錯日志。那么前端如果出現問題就很方便了，我們可以直接通過 F12 打開控制臺查看報錯日志，而且也可以對 js 文件進行 debug。但是我們上面說過通過 mode 指定 production 值后會對代碼進行壓縮，那么調試是一件即為困難的事情。
Source Map 就是用來解決這種問題的。
1)概念
Source Map 是一個信息文件，里面存儲著位置信息，也就是 轉換后 -> 轉換前 的位置映射。在它的幫助下，出錯的時候，可以直接顯示原始代碼，而不是轉換后的壓縮代碼，可以在一定程度上提高排錯效率。
2)使用
正常在開發環境下，webpack 是默認開啟了 Source Map 功能，當程序運行出錯的時候，可以直接在控制臺提示錯誤位置的信息
但是這種提示是不友好的，它記錄的是壓縮后代碼的位置，這樣導致的問題就是實際運行報錯的行數 與 源代碼的行數 不匹配，這將成為我們排錯路上的 絆腳石 ~!
既然如此，那我們就帶著問題解決問題!
3)所遇問題
① 問題 1：實際運行報錯的行數 與 源代碼的行數 不匹配
那么要解決這個問題也很簡單，就需要在 webpack.config.js 中添加以下配置：
配置完查看結果，至此我們可以發現 運行報錯的行數 與 源代碼的行數 是相匹配的!
② 問題 2：生產環境中容易暴露源碼
以上我們雖然已經可以定位到源碼的錯誤，但是如果在生產環境中，暴露源碼終歸不是一件好事，因此我們同樣要解決該問題。
解決該問題的方式也很暴力，直接打包的時候在webpack.config.js文件中將mode 指定為 production，這樣不會顯示報錯行數，也不會顯示源碼內容
- mode: "production"
③ 問題 3：生產環境需顯示行數隱藏源碼
上面那種方式過于暴力，行數和源碼一股腦都不給你顯示了。那有沒有比較這種的方式，可以顯示行數但不顯示源碼?答案肯定是有的!我們只需將 devtool 的值配置為 nosources-source-map 即可
- devtool: 'nosources-source-map'
配置完畢我們看效果：
該方式既可以顯示報錯行數也可以隱藏源碼，是一種十分合適解決方案。
因此我們做個總結
4)總結
- 開發環境
將 devtool 的值設置為 eval-source-map ，有利于精準定位到具體的錯誤行
- 生產環境
關閉 Source Map 或將 devtool 的值設置為 nosource-source-map ，有利于防止源碼泄漏，提高安全性
