前端打包工具基础介绍

为什么要用打包工具？

开发时，我们会使用框架，es6模块化语法，less/sass 等 css 与处理器等语法进行开发。

这样的代码想要在浏览器运行必须经过编译成浏览器能识别的 js、css等语法才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提示代码性能等。

有哪些打包工具

• webpack
• vite
• rollup
• grunt
• gulp
• parcel

基本使用

webpack 是一个静态资源打包工具

他会以一个或多个文件作为打包入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

我们将 webpack 输出的文件叫做 bundle

功能介绍

webpack 本身功能是有限的：

• 开发模式：仅能编译 js 中的 ES Module 语法
• 生产模式：能编译 js 中的 ES Module 语法，还能压缩 js 代码

使用

（npx： 会把node_modules下面的.bin 添加为临时变量）

观察输出文件

默认 webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

小结

webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其它资源就会报错。所以学习 webpack，就是主要学习如何处理其它资源