使用 Webpack 的需求

领航猿麦兜
971 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

使用 Webpack 的需求

我们先回顾一下历史，在打包工具出现之前呢？我们是如何的在 Web 网页中去使用 JavaScript 代码的呢？

我们先来看一个 HTML 文档，这个文档中我们共加载了 11 个 JS 文件。

<!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/ .js"></script>
  <script src="./scripts/payment.js"></script>
  <script src="./scripts/checkout.js"></script>
  <script src="./scripts/shipping.js"></script>
</body>

</html>

这 11 个 JS 文件又可以分为两部分：

第一部分：是引入的外部或者第三方的库以及框架文件，比如这里我们引入的 jquery、lodash、以及 bootstrap。JQuery 和 lodash 是第三方的 JS 库，可以提高我们项目的开发效率，Bootstrap 是第三方的 UI 框架，可以协助我们做页面的布局以及交互等等。

第二部分：是我们自己定义的 JavaScript 文件，是项目的业务代码，比如 一些公共的文件 common.js，用户相关的 JS 文件 user.js、健全相关的 JS 文件 authentication.js、产品相关的 JS 文件 product.js、库存相关的 JS 文件 inventory.js、付款相关的 JS 文件 payment.js、结算相关的 JS 文凭checkout.js 以及食品相关的 JS 文件 shipping.js 等等，

一般情况下，我们自己的业务代码可能会需要依赖上面的第三方的代码，根据我们JS 在浏览器上的加载特性，所有的 JS 代码是从上至下来加载的。因此，如果我们的业务代码依赖上面的那些库或者是框架代码，那么顺序一定不能颠倒。

那假如我们把两部分文件加大的顺序来颠倒一下，那么这个项目能就崩溃掉了。

这种传统的方式对我们开发人员来说的话，会有很大的开发的心智负担，代码也很难扩展。

那我们可能就会思考了，我们把这些文件按照一些预定的顺序来合并到一个文件里，不就解决问题了吗？

那我们再来看一个 HTML 文档，它只加载了一个 JS 文件。

<!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>

这个 JS 文件包含了 11 个 JS 文件，里面是我们项目的所有代码，这种方式虽然解决了我们上个页面加载多个 JS 的问题，但可能会导致其他的问题，比如作用域、文件太大、可读性差以及可维护性弱等等问题。

下面我们来给大家解释这几个问题：

作用域：什么叫作用问题呢？如果使用过 JQuery、lodash、Bootstrap 的同学应该知道，这些第三方库文件会分别在 Window 对象上面来绑定全局的变量。比如 JQuery 可能会绑定 ，例如"window.，例如"window."；lodash 可能会绑定下划线，例如“window._”，等等。就连我们自己的业务文件，可能也会在全局上面绑定一些变量，例如“window.user”。这些变量会严重的污染我们的 window 对象，使我们的 window 对象变得臃肿，这就是变量的作用域问题。

文件太大：如果我们 11 个文件分散加载，那么页面的内容会随着文件的加载顺序逐渐来显示内容。可如果我们将这 11 个文件合并成一个 JS 文件，那这个脚本会带来网络瓶颈，用户需要等待一段时间才能看到页面的内容，会有短暂的白屏，用户体验非常差。

可读性差以及可维护性弱：对于这两问题也不难理解，如果我们把所有代码都合并在一个超大的文件里，那么对于程序的可读性以及可维护性就带来了灾难，最终加重了我们编程人员的负担。

那如何解决这些问题呢？那我们接下来将继续研究。

avatar
文章
阅读
粉丝