进入vue之前需要了解的打包工具

在学习vue框架之前我们要学习一下打包工具，因为现在的项目都是基于模块化的思想来开发，我们需要将各个模块整合到一起，即打包工具为我们提供了便捷。

我们使用模块化的终极思想就是做到高内聚，低耦合；

高内聚：项目由各个模块组成

低耦合：项目中各个模块之间相互不影响，即使一个模块出现问题，另外的模块也能正常运行，即不相互依赖。

打包工具主要做的事情：

1.编译代码   如：把新的 js 代码变成老的 js 代码或者把 ts 代码变成 js 代码 ，解决老版本浏览器不支持的情况，还有一种情况，就是在 js 文件中，引入其他类型的文件（大多只用于前端）。

2、压缩和"加密"代码  为了防止代码被别人剽窃，于是希望给代码“加密”。程序员就使用“混淆”，把代码变得更加混乱，代码不再是简洁易懂；

后来发现程序加载比较慢，于是给代码洗澡（压缩代码）：

• 把永远不会被运行到的代码删掉

• 把变量的名字变短，比如原来你有个变量叫changcheng，打包之后就变成了cc 或 c

• 把多余的空格、空行删掉

常见的打包工具（简单了解两个）esbulid

esbuild

esbulid是一个用 go 语言写的 javascript, typescript 打包工具,速度比 webpack 快 100 倍以上。

rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。

vite

vite是下一代前端开发与构建工具。 [1] Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持,上线时间2019年,一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

它不用再像使用npm一样，每次使用前需要下载modules模块。

grunt 与 gulp

这哥们俩，名字就很像，而且年龄相仿、工作相似，就连误解也是如出一辙。它俩不是打包工具，但任何讨论打包工具的文章，这老哥俩从不缺席，也不能缺席。

在从前，没有打包工具。老哥俩的工作是“自动化”。比如把大象放进冰箱分三步：把冰箱门打开，把大象放进去，把冰箱门关上。以前你要一步一步办，但在这老哥俩的帮助下，你只要一步：告诉 grunt 或 gulp“帮我把大象放进冰箱”。当然，你得事先告诉老哥俩，是怎么放进去的（把步骤写在一个文件里）。也就是说，你只要做一次，以后都是老哥俩来干。

webpack

我们新手学习的重点webpack

其特点：

1、虽然臃肿，但不难用

2、速度不快，但可接受

3、功能多

4、bug 少

5、非开箱即用,需要自己配置

功能多和bug少，是其最重要的优点

官网：webpack

什么是webpack?

 webpack 是一个打包模块化 javascript 的工具，在webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目； webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

下一节我们再来介绍webpack的配置和使用。