千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  IT问答库  >  Web基础知识

为什么需要 Webpac-Webpack是什么?

发布:web前端培训 2022-02-09 15:31

推荐答案

为什么需要 Webpack,想要理解为什么要使用 webpack,我们先回顾下历史,在打包工具出现之前,我们是如何在 web 中使用 JavaScript 的。在浏览器中运行 JavaScript 有两种方法:第一种方式,引用一些脚本来存放每个功能,比如下面这个文档:

Webpack

Webpack

01-why-webpack/index-1.html
<!DOCTYPE html>
<html lang="zh-CN">
<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="zh-CN">
<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>

最新问答资讯

01 unity用什么编程语言?unity学习难度大吗

学习 unity 语言
6020 人关注

02 python容易学吗?学好python有什么好处?

学习 python 工作 培训
5389 人关注

03 html是什么语言?html学习难吗?

学习 html 语言 可以
5062 人关注

04 c语言难学吗?c语言学好要多久?

语言 技术 学习
4733 人关注

06 学好平面设计要多久?报速成班靠谱吗?

平面 设计 学习 时间
4238 人关注

相关问题

web前端自学好还是培训好

关于“web前端自学好还是培训好”这个问题说法众说纷纭,有很多...

选择Web培训机构的注意事项有哪些

师资力量;老师是不是又丰富的实战开发经验,这点是非常重要的。...

Web前端主要做什么

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HT...

web前端培训分享:学Web前端的好处有哪些

web前端近几年在IT互联网行业比较火热,很多人都开始参加web前端...

web前端培训分享:Web前端需要学什么

Web前端需要学什么?好不好学?这是很多想要进入到web前端行业的学...

零基础参加web前端培训都学什么

零基础参加web前端培训都学什么?基础阶段学习HTML常用标签与表单...

测一测
你知道多少IT梗