為什么需要 Webpack，想要理解為什么要使用 webpack，我們先回顧下歷史，在打包工具出現(xiàn)之前，我們是如何在 web 中使用 JavaScript 的。在瀏覽器中運(yùn)行 JavaScript 有兩種方法：第一種方式，引用一些腳本來(lái)存放每個(gè)功能，比如下面這個(gè)文檔：
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學(xué)習(xí)指南</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>
此解決方案很難擴(kuò)展，因?yàn)榧虞d太多腳本會(huì)導(dǎo)致網(wǎng)絡(luò)瓶頸。同時(shí)如果你不小心更改了JavaScript文件的加載順序，這個(gè)項(xiàng)目可能要崩潰。
第二種方式，使用一個(gè)包含所有項(xiàng)目代碼的大型 .js 文件, 對(duì)上面的文檔做改進(jìn)：
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學(xué)習(xí)指南</title>
</head>
<body>
<!-- HTML 代碼 -->
<div>我的HTML代碼</div>
<!-- 引入我自己的 JavaScript 文件 -->
<script src="./scripts/bundle.33520ba89e.js"></script>
</body>
</html>
京公網(wǎng)安備
11010802035719號(hào)