webpack介绍

1. 概念

webpack是一个静态的模块化打包工具，为现代的javaScript应用程序

• 打包bundler : webpack可以帮助我们进行打包 静态的static :
• 我们可以将代码打包成最终的静态资源，部署到静态服务器
• 模块化module : webpack支持各种模块化开发，ES Module . CommonJS . AMD 等 现代的modern :
• 因为现代前端开发面临各种问题，才催生了webpack的出现和发展
  
  我们可以编写( 左边 -----<<<<<< )的各种类型的代码，但是浏览器不能直接识别，所以需要打包工具对代码进行打包，生成可以被浏览器直接识别的静态资源(右边 ---->>>>>)

2. 打包webpack是如何打包的呢

• webpack会根据命令或者配置文件找到入口文件
• 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）
• 然后遍历图，打包一个个模块（根据文件的不同使用不用的loader来进行解析）

3. 图解

一、webpack的使用前提

因为webpack的运行时依赖Node环境，所以需要安装Node。

下载 Node.js

注意：

webpack 依赖 node ，node 支持 common.js，所以配置webpack时，都是用的common.js

node虽然可以支持ES module，但是需要配置，比较麻烦

---

---

1、认识plugin

plugin是什么？

1、plugin是插件的意思，通常是用于对某个现有的架构进行扩展
2、webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等

loader和plugin区别

1、loader主要用于转化某些类型的模块，它是一个转化器
2、plugin是插件，它是对webpack本身的扩展，是一个扩展器

plugin的使用过程

1、步骤一：通过npm安装需要使用plugins（某些webpack已经内置的插件不需要安装）
2、步骤二：在webpack.config.js中的plugins中配置插件

babel是什么？

• Babel是一个工具链
• 主要用于旧浏览器后者环境中将ECMAScript 2015+ ( ES6+ )的代码转换为向后兼容的JavaScript
• 包括 : 语法转换、源代码转换等

为什么需要babel呢？

• babel对于前端开发来说，是不可缺少的一部分
• 开发中，如果我们想使用ES6+的语法，想要使用TypeScript，开发React项目，都离不开Babel

babel的底层原理？

• 从一种源代码（原生语言）转换成另一种源代码（目标语言）
• 事实上我们可以吧babel看成就是一个编译器
• babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码

plugin / loader 通俗的举例

1、plugin 就好比一辆汽车，需要进行改装轮毂，发动机，座椅
2、loader 就是 修车的时候，没有配件，需要用其他车的配件来代替，转换成这辆车可识别的零件（如：大灯，螺丝，座椅，显示器）

参考链接：https://blog.csdn.net/a15297701931/article/details/124611698
参考链接：https://blog.csdn.net/qq_43743402/article/details/123652090