Webpack 似乎令人難以承受，並且是您在建立 React 應用程式時可能會避免學習的東西。但為您的 React 應用程式自行設定和建立非常簡單。這將是 Webpack 及其實際功能的初學者指南。讓我們來解答您可能對 Webpack 有的任何疑問…哈哈…
我們將回顧：
什麼是 Webpack？
如何配置 Webpack
Webpack 中的快取清除
Webpack 是什麼，它是如何運作的，它有什麼作用？
如果您熟悉 Create React App，那麼 Webpack 負責 Create React App 中的主要功能，以及 Babel（JS 編譯器）等其他一些功能。 Create React App 使用 Webpack 將檔案捆綁在一起，這就是為什麼使用 create React app 開發 React 應用程式非常簡單的原因。
Webpack 是一個模組捆綁器。但是，這是什麼意思？這意味著 Webpack 將 JS 文件編譯為一個主文件，或者您想要將程式碼捆綁到其中的任意多個文件，但通常它是一個捆綁文件。
Webpack 具有許多功能，例如模組捆綁、文件縮小（透過刪除空格、註解、不必要的程式碼以及最小化/縮短程式碼來最小化程式碼的過程。）、SASS 編譯等。應用程式轉換為瀏覽器可以理解的內容。
Webpack 管理依賴關係並載入需要先載入的程式碼。 Webpack 會追蹤哪些文件依賴哪些文件並相應地載入它們。
Webpack 解決的問題是，在開發大型應用程式時，您的依賴項可能會堆積並交叉不同的文件，這使其變得複雜且難以管理。 Webpack 為您管理所有這些依賴項和文件，將其捆綁到瀏覽器可以理解的純 JS 中。
如何配置 Webpack
如果您想將載入程式和外掛程式新增至 Webpack 捆綁包中，則必須在 Webpack 設定檔中執行此操作。
這是 webpack 設定檔的樣子。
//Webpack.config.js file:
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
};
讓我們解開這個文件中發生的事情。
首先，我們將mode設定為development ，這告訴Webpack不要縮小我們的程式碼，這在開發時非常有幫助。
然後，如果我們想使用它，就必須確保該文件中的所有內容都作為模組導出。
在使用npm init初始化應用程式時建立的package.json檔案中，您可以告訴 Webpack 在scripts中執行，如下所示：
"scripts": {
"start": "webpack --config webpack.config.js"
},
//The webpack config file can be named anything,
//In this case, it is webpack.config.js
接下來， entry屬性接受整個應用程式執行位置的 src。預設情況下，Webpack 將在src資料夾中查找index.js文件，但您可以在此處指定應用程式啟動的文件以及需要捆綁的程式碼。
output屬性是一個物件，您希望在其中輸出程式碼。 filename屬性可以命名為您想要的任何名稱，通常是main.js 。
path屬性指定程式碼的去向。在本例中，我們正在解析dist目錄的絕對路徑，您可以將此資料夾稱為任何名稱。本質上，這是 Webpack 將捆綁您的應用程式的資料夾，傳統上該資料夾是dist 。
這是配置 Webpack 檔案以及如何讓 Webpack 執行您的應用程式的基礎知識。當然，您可以向此設定檔加入更多內容，例如載入程式和外掛程式。如果你對此有興趣，可以參考Webpack文件。
Webpack 中的快取清除
快取清除一開始可能是一個令人困惑的話題，但它對於應用程式的功能以及可以在 Webpack 中輕鬆完成的事情可能很重要。
當您使用 Webpack 捆綁應用程式時，Webpack 會將所有內容捆綁在可部署的/dist目錄中。
將應用程式部署到伺服器後，並且用戶正在存取您的應用程式，客戶端（通常是瀏覽器）必須再次存取伺服器以檢索應用程式的所有資產。
這就是瀏覽器快取應用程式資源的原因。本質上，它們將文件或模組保存在/dist目錄中，以便用戶下次刷新或存取瀏覽器時不必檢索它已經記住的任何資產。
如何防止瀏覽器快取我們更改過的 CSS 或檔案包？
瀏覽器快取檔案可能會導致問題，因為如果我們更改已快取的文件，瀏覽器可能不會更新它們，並假設文件是相同的，因為檔案名稱沒有更改。
快取清除背後的想法是，我們希望每次對文件進行更改時都建立一個新的文件名，如果沒有進行更改，則保持文件名相同。這樣，當您對文件進行更改時，當客戶端向伺服器發出請求以檢索應用程式資產時，您更改的文件將更新，因為瀏覽器無法辨識文件名。
幸運的是，Webpack 在 Webpack 設定檔的output.filename中附帶了一個名為[contenthash]的內建替換功能。
[contenthash]替換將根據資產內容是否已變更建立唯一的雜湊值，僅在變更時更新。
當您將[contenthash]新增至設定檔中的輸出物件時，它將如下所示：
//the output object in module.exports from the webpack.config.js file:
output: {
filename: "main.[contentHash].js",
path: path.resolve(__dirname, "dist")
},
因此，我希望 Webpack 的介紹易於理解，並回答了您可能對 Webpack 存在的一些問題。 Webpack 正在做很多幕後工作以使您的 React 應用程式正常工作，您所需要做的就是確保為您的應用程式正確配置它。下次您開發 React 應用程式時，請考慮自行設定 Webpack！
原文出處：https://dev.to/cs_carms/what-is-webpack-43h6
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式