1、前言
- 第一次来掘金写个人学习Blog，只是为了记录自己的学习过程，根据自己对该（知识点）的学习想法和理解进行记录，目前还是student，技术视野和工程化思想有限，所以目前还达不到对很某些芝士有很深的理解和项目应用。（就说这么多吧）。
2、Webpack使用场景
- 为什么需要用Webpack来做开发？（或者为什么不是选择其他的构建工具，如vite）
- 首先，从Webpack官网知道其概念：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 我们最开始学习前端三兄弟的时候（html、css、js），所有东西都是静态的、原生的。后来为了提高生产效率，我们接触了Node.js，开始使用模块化规范进行开发工程化web项目，并借助node的npm包管理工具为我们提供项目开发时需要的各种依赖，使用export、import语句在各个组件之间进行导出导入。除此之外，一个项目除了基本的html .css .js类型文件外还有各种的图片资源、字体等其他文件。问题就来了：这么多东西，我该如何有一个统一的管理方式？
- 于是，为了寻找一个 可以让我们编写模块，而且还支持任何模块格式（至少在我们到达 ESM 之前），并且可以同时处理资源和资产。 我们找到了Webpack。
3、Webpack和Vite构建工具对比
个人认为：
- 从生态来看：Vite的目前的生态远不及Webpack，尤其是loader和插件的丰富度不如Webpack。
- 从构建速度来看：Webpack的构建速度要比Vite差很多。（毕竟Webpack每次build的时候都要去打包，逐级递归处理依赖，然后还要生成依赖图等等）。
- 从目前来看，在当下百花齐放的 Web 工程化领域中，Webpack 依然是最为广泛使用的构建工具之一。在2022年的前端全球调查报告中，webpack的使用率依旧是No.1。
4、Webpack配置
1.mode （配置代码开发环境）
配置代码环境
2.entry （入口）
配置webpack打包的入口，默认是/src目录下的index.js （约定大约配置）。
entry的属性值是一个相对路径字符串。
3.output（出口）
配置webpack打包的出口，默认是/dist目录。
output的属性值，可以选择重命名打包文件和选择其他的打包路径。
4.loader（加载器）
webpack默认只帮我们处理js ts文件，对于样式文件无能为力。所以需要我们手动配置。 loader不写loader非要写module（搞不懂），里面是relus（规则）数组，数组里面是需要处理的规则对象集合。
test是指要处理的哪种类型文件，属性值是正则表达式（去匹配要处理的某种类型文件）
use是指使用对应的loader来进行处理。
比如：处理css文件需要引入两个loader，css-loader和style-loader。
css-loader是处理css文件， style-loader是使其样式生效。
还有sass-loader less-loader等其他的loader。
如果要同时处理多种类型的样式，如jpg/png/gif等，可以使用 |。 如test: /\.(png|jpg|gif)$/
处理图片资源的话，不用引入额外的loader，webpack有内置的Asset Modules资源模块。type: 'asset/resource'
5、plugin（插件）
webpack提供了很多开箱即用的插件 允许我们对webpack做额外的拓展。比如在webpack打包时自动在/dist目录新建一个html文件，可以使用HtmlWebpackPlugin
5、总结
暂时粗略复习这么多，没有学习深刻，其他的等实战开发中再学习。共勉！
