一、談談你對Webpack的理解
1.1 背景
Webpack 的目標是實現前端項目的模塊化，從而更高效地管理和維護項目中的每一個資源。在早期的前端項目中，我們通過文件劃分的形式來實現模塊化，也就是將每個功能及其相關狀態數據各自單獨放到不同的 JS 文件中。約定每個文件是一個獨立的模塊，然後再將這些js文件引入到頁面，一個script標籤對應一個模塊，然後再調用模塊化的成員。比如：
<script src="module-a.js"></script>
<script src="module-b.js"></script>
但這種模塊化開發的弊端也十分明顯，模塊都是在全局中工作，大量模塊成員污染了環境，模塊與模塊之間並沒有依賴關係、維護困難、沒有私有空間等問題。隨後，就出現了命名空間方式，規定每個模塊只暴露一個全局對象，然後模塊的內容都掛載到這個對象中。
window.moduleA = {
method1: function () {
console.log('moduleA#method1')
}
}
不過，這種方式也沒有解決第一種方式的依賴等問題。接着，有出現了使用立即執行函數爲模塊提供私有空間，通過參數的形式作爲依賴聲明。
(function ($) {
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').animate({ margin: '200px' })
}
window.moduleA = {
method1: method1
}
})(jQuery)
上述的方式早期解決模塊的方式，但是仍然存在一些沒有解決的問題。例如，我們是用過script標籤在頁面引入這些模塊的，這些模塊的加載並不受代碼的控制，時間一久維護起來也十分的麻煩。
除了模塊加載的問題以外，還需要規定模塊化的規範，如今流行的則是CommonJS 、ES Modules。
特別是隨着前端項目的越來越大，前端開發也變得十分的複雜，我們經常在開發過程中會遇到如下的問題： - 需要通過模塊化的方式來開發 - 使用一些高級的特性來加快我們的開發效率或者安全性，比如通過ES6+、TypeScript開發腳本邏輯，通過sass、less等方式來編寫css樣式代碼 - 監聽文件的變化來並且反映到瀏覽器上，提高開發的效率 - JavaScript 代碼需要模塊化，HTML 和 CSS 這些資源文件也會面臨需要被模塊化的問題 - 開發完成後我們還需要將代碼進行壓縮、合併以及其他相關的優化
而Webpack的出現，就是爲了解決以上問題的。總的來說，Webpack是一個模塊打包工具，開發者可以很方面使用Webpack來管理模塊依賴，並編譯輸出模塊們所需要的靜態文件。
Webpack的核心概念
Entry：入口，Webpack執行構建的第一步將從Entry開始，可抽象成輸入。告訴Webpack要使用哪個模塊作爲構建項目的起點，默認爲./src/index.js
output：出口，告訴Webpack在哪裏輸出它打包好的代碼以及如何命名，默認爲./dist
Module：模塊，在Webpack裏一切皆模塊，一個模塊對應着一個文件。Webpack會從配置的Entry開始遞歸找出所有依賴的模塊。
Chunk：代碼塊，一個Chunk由多個模塊組合而成，用於代碼合併與分割。
Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
Plugin：擴展插件，在Webpack構建流程中的特定時機會廣播出對應的事件，插件可以監聽這些事件的發生，在特定時機做對應的事情。
Webpack的基本功能有哪些？
代碼轉換：TypeScript編譯成JavaScript、SCSS編譯成CSS等等
文件優化：壓縮JavaScript、CSS、html代碼，壓縮合並圖片等
代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其異步加載
模塊合併：在採用模塊化的項目有很多模塊和文件，需要構建功能把模塊分類合併成一個文件
自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器
代碼校驗：在代碼被提交到倉庫前需要檢測代碼是否符合規範，以及單元測試是否通過
自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。
Webpack如何配置多入口文件?
entry: { home: resolve(__dirname, "src/home/index.js"), about: resolve(__dirname, "src/about/index.js")}
用於描述入口的對象。你可以使用如下屬性：
dependOn:當前入口所依賴的入口。它們必須在該入口被加載前被加載。
filename:指定要輸出的文件名稱。
import:啓動時需加載的模塊。
library:指定library選項，爲當前entry構建一個library。
runtime:運行時chunk的名字。如果設置了，就會創建一個新的運行時chunk。在Webpack 5.43.0之後可將其設爲false以避免一個新的運行時chunk。
publicPath:當該入口的輸出文件在瀏覽器中被引用時，爲它們指定一個公共URL地址
常用loader
css-loader讀取合併CSS文件
style-loader把CSS內容注入到JavaScript裏
ts-loader: 打包編譯Typescript文件
sass-loader解析sass文件（安裝sass-loader，node-sass）
postcss-loader自動添加兼容瀏覽器前綴（postcss.config配置）
url-loader將文件轉換爲base64 URI。
vue-loader處理vue文件。
