為什么需要 Webpack，想要理解為什么要使用 webpack，我們先回顧下歷史，在打包工具出現之前，我們是如何在 web 中使用 JavaScript 的。在瀏覽器中運行 JavaScript 有兩種方法：第一種方式，引用一些腳本來存放每個功能，比如下面這個文檔：
Webpack
01-why-webpack/index-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千鋒大前端教研院-Webpack5學習指南</title>
</head>
<body>
<!-- HTML 代碼 -->
<div>我的HTML代碼</div>
<!-- 引入外部的 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<!-- 引入我自己的 JavaScript 文件 -->
<script src="./scripts/common.js"></script>
<script src="./scripts/user.js"></script>
<script src="./scripts/authentication.js"></script>
<script src="./scripts/product.js"></script>
<script src="./scripts/inventory.js"></script>
<script src="./scripts/payment.js"></script>
<script src="./scripts/checkout.js"></script>
<script src="./scripts/shipping.js"></script>
</body>
</html>
此解決方案很難擴展，因為加載太多腳本會導致網絡瓶頸。同時如果你不小心更改了JavaScript文件的加載順序，這個項目可能要崩潰。
第二種方式，使用一個包含所有項目代碼的大型 .js 文件, 對上面的文檔做改進：
01-why-webpack/index-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千鋒大前端教研院-Webpack5學習指南</title>
</head>
<body>
<!-- HTML 代碼 -->
<div>我的HTML代碼</div>
<!-- 引入我自己的 JavaScript 文件 -->
<script src="./scripts/bundle.33520ba89e.js"></script>
</body>
</html>
京公網安備
11010802035719號