首先就是我们的代码是运行在浏览器上的，但是我们开发大多都是利用node进行开发的，在浏览器中并没有node提供的那些环境。这就早成了运行和开发上的不同步问题。 -----引言

浏览器模块化的问题：

• 效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率
• 兼容性问题：浏览器目前仅支持ES6的模块化标准（不支持COMJS），存在兼容问题，当然目前其实只要不是特别老的浏览器都没有问题（可以忽略不记）。
• 工具问题：浏览器不支持npm下载的第三方包。
  这仅是其中的一部分问题，在日常开发中遇到的业务问题就已经很头痛了，还要再关注这些兼容性，执行效率问题，会很痛苦。

node的问题更少

上面提到的问题，在node端没有那么明显，在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多。出现构建工具的根本原因还是在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样。开发的时候对于工作人员来说，模块划越细，代码书写越整洁越好，而对于浏览器运行来说呢，文件越少越好（减少请求次数），代码越少越少好（进行代码压缩，混合）。

具体：

开发时态，devtime：

1. 模块划分越细越好
2. 支持多种模块化标准
3. 支持npm或其他包管理器下载的模块
4. 能够解决其他工程化的问题

运行时态，runtime：

1. 文件越少越好
2. 文件体积越小越好
3. 代码内容越乱越好
4. 所有浏览器都要兼容
5. 能够解决其他运行时的问题，主要是执行效率问题

解决办法

既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。

这样的工具，叫做构建工具
这样一来开发者就不需要去关注什么我该使用什么样的导出导入方式，兼容性问题，你会在需要的时候调用构建工具使他转换目标代码。

看到了很多webpack和vite的面试题，但是本人一开始看的时候看的不是很懂，别准备写一个连载博客，讲解每一个知识点和附带的webpack的面试题。