webpack入门（一）-- 什么是webpack

webpack入门（一）

为什么需要打包工具？

1、现在项目开发时，通常会使用各种框架，比如vue\react等，会使用模块化语法，会使用es6高级语法，会使用less\sass\stuly等css预编译器。但是这样的代码在浏览器中是无法识别执行的。而打包工具能够将这些语法编译为浏览器可执行的代码。
2、打包工具还具有对我们代码及其他资源进行压缩处理、进行兼容处理、提升代码性能等功能。

常见的打包工具有那些？

Grunt、Gulp、Parcel、Webpack、Vite…
但是目前市面上最流行的打包是 Webpack，尤其是webpack5的功能更是强大。

webpack的基本介绍

1、webpack是一个静态资源文件打包工具。
2、webpack会以一个或者是多个文件为打包入口，从而将整个项目相关依赖资源编译组合为一个或者多个文件输出出去。
3、输出的文件可以直接在浏览器中运行。
4、我们也将webpack输出的资源叫做bundle。
5、webpack本身的功能是有限的。

• 开发模式：仅仅能编译模块化语法。
• 生产模式：仅仅编码模块化语法、js代码压缩。

注意
1、浏览器本身是无法识别模块化语法的。
2、webpack是运行在node.js环境下的，尤其是webpack5需要要求nodejs16以上。所以，webpack的语法都是常用的commonjs语法。