简单理解 Webpack，以及Web前端使用打包工具的原因

Java 中的模块

传统的前端开发就是 JS、HTML、CSS 三件套。Web 没有像 Java 一样拥有优秀的模块机制，就是类与类之间可以分装在不同的包下，不同包下的类互相引用时通过import导入即可。模块之间的类名不会发生冲突。你可以把模块想象是一个平行世界，平行世界之间如果要互通就打开一道时空之门（import）来进行链接。

下面是两个不同包里的相同类名的类：

package demo.a;

class DemoA {}

package demo.b;

class DemoA {}

在 package demo.test 中，我们创建一个 Test 类。入口函数中创建了两个相同类名（ClassA）的对象。第一个 ClassA 是通过 import 语句导入了 demo.a.ClassA；第二个 ClassA 则是在类名前加上包名地址的 ClassA。模块让我们类名、变量都不冲突：

package demo.test;

import demo.a.ClassA;

public class Test {

	public static void main(String[] args) {
		ClassA a = new ClassA();
		demo.b.ClassA b = new demo.b.ClassA();
	}

}

Web 中的模块

没有模块的问题

回到标题一当中最开头说的，Web 有 JavaScript、HTML、CSS，这些文件不存在模块，互相导入的机制。虽然 HTML 可以通过标签引入这些文件，但是不存在独立空间的东西。把 js 代码拆分一个个 .js 文件，再通过 <script> 标签依次引入，这样会导致“变量污染”等问题，变量冲突问题也非常频繁。

下面分别是不同文件夹之下的同名文件，其实不同民文件，只要是相同的变量名就会引发变量污染：

demo/a/ClassA.js：

let a = 10;

demo/b/ClassA.js：

let a = 100;

<script src="../a/ClassA.js"></script>
<script src="../b/ClassA.js"></script>

控制台直接报错误：Uncaught SyntaxError: Identifier 'a' has already been declared (at ClassA.js:1:1)。说的是，变量名 a 已经被声明了。

Node.js 模块

现如今，基于 Node.js，Web 有了模块机制，也可以像 Java 那样使用模块，每一个文件都是一个独立的空间，相同的变量名只要不是在一个模块中就不会发生“变量污染”的问题。

模块引用复杂

Web 的资源非常复杂，有 JavaScript 文件、CSS 文件、HTML 文件，以及其他媒体文件。这些文件互相存在引用关系，如下图：

Webpack 就是集成一个个模块的打包工具，它基本上要完成的内容包括：

1. 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
2. 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
5. 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
6. 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
7. 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

作用是什么

Webpack 会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。模块是分散，打包是集中。

假如你的项目中有一百个 .js 文件，Webpack 就把这些文件都打包成一个 .js 文件。

构建工具有 Webpack、Grunt、Gulp、Fis3、Rollup，以及 Vue 推出的 Vite 下一代构建工具。

最后

废话不多说，直接上手体验 Webpack 的魅力吧：搭建 Webpack 项目步骤