前端为什么要用打包工具。webpack怎么配置，今天我们就来简单的聊一聊吧。
哈喽哈喽，我是你们的金樽清酒。上次不是面试了字节嘛。其中有一个问题是我一直没有去解决的问题。那就是自己去配置过打包工具。在公司实习早就已经配置好了，所以也没有过多的去了解过。当时面试官是这么问题。打包工具有什么作用呢？vite和webpack有啥区别呢？你知道commonJS和ESmoudle的区别嘛？我想这几个问题应该是相互之间有联系的吧。也是作为一个前端必须要掌握的。别说你没碰见过就不去学习，等到碰见的时候就会很棘手。
其实关于这个问题，在实习的时候也碰到了。在最后写年度总结报告的时候。本地的css样式正常，一打包到线上环境，css的执行顺序就乱了。这也是打包工具的作用吧，会合并文件和属性，压缩文件的体积进行优化。ok，话不多说，今天我们就来聊一下打包工具webpack。
为什么要用打包工具？
- 多文件处理
因为前端呢有很多类型的资源文件。如.html、.css、.js、.vue、.jsx、.jpg、.png等。而打包工具可以处理不同类型的文件，将它们变成一个或多个的浏览器能识别的静态资源文件。
- 模块化开发
现代前端多采用模块化开发，将代码拆分成独立的模块，每个模块负责独立的功能，这样可以提高代码的复用性和可维护性，可读性更高。然后浏览器并不支持模块化开发，需要打包工具将多个文件整合成浏览器能识别的静态资源。
- 性能优化
打包工具可以对代码进行各种优化，以提升页面的加载速度和用户体验。如代码压缩：去除代码当中不必要的空格，注释等减小文件的大小。代码分割：将代码分割成多个小文件，按需加载，减少初始加载时间。Tree Shaking：移除未使用的代码，进一步减小文件大小。 缓存优化：通过哈希值等方式，使浏览器能够缓存静态资源，加快后续加载速度。
- 开发效率提升
打包工具通常集成了各种开发工具和插件，可以帮助开发者提高开发效率。例如：
- 热更新：在代码发生变化时，自动重新编译并刷新浏览器，减少开发者的等待时间。
- 代码检查：在编译过程中自动检查代码中的错误和潜在问题，帮助开发者及时发现和修复问题。
- 自动化测试：在编译过程中自动运行测试用例，确保代码质量。
- 兼容性处理
不同的浏览器对 JavaScript 和 CSS 的支持程度不同。打包工具可以通过转译（transpiling）等方式，将现代 JavaScript 和 CSS 转换为兼容性更好的版本，确保在各种浏览器中都能正常运行。比如将es6以上的代码转成es5。
- 生态系统支持
现代前端开发通常依赖于各种第三方库和框架。打包工具可以自动下载和管理这些依赖，并将它们合并到最终的打包文件中，简化了项目的依赖管理。
细数了种种打包工具的优点，足以证明打包工具对前端的重要性。正因为有打包工具的存在。我们才能用各种框架各种文件。将前端从刀耕火种带入了工业时代，大大提高了生产效率。
简单了解一下webpack
学习新的技能，最好的方式肯定是先看它的文档，然后再去进行实践。我在网上找了一个webpack的中文文档webpack中文文档。
文档是这么介绍webpack的，webpack是一个用于现代应用程序的静态模块打包工具，当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目当中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。这么说你可能不太懂，待会我们看实战。其实意思就是说，从一个入口文件出发。webpack根据import等导入语句读取其他文件的模块内容，然后生成到一个或多个文件当中，也就是输出了一个浏览器可以识别的产物静态资源。
先了解一下几个重要的概念
- 入口
简单的说呢，就是给webpack指明，从哪个文件开始读，然后根据这个文件的import导入等生成依赖图。一般在webpack.config.js中配置entry属性。入口文件在我们的项目中一般是main.js。
- output输出属性
也就是配置我们用webpack打包生成的文件，配置生成的位文件路径和文件名，当然远不止如此，需要你自己去学习。
- loader
这是webpack中一个很重要的概念。为什么呢？其实呢，webpack只能读懂js文件或json文件。那webpack如何处理不同的文件类型呢？其实就是靠loader。
那如何配置呢？在module属性里面，配置rules数组，每一项就是每一个loader。里面有两个文件后缀名，test，正则匹配文件后缀名，$符表示结尾。use属性就是所用的loader。结合起来就是什么文件后缀用什么loader。
例如我上面配置的loader。分别配置了.css后缀用什么loader，图片用什么loader，.js文件的babel-loader，生成低版本的js文件。
- 插件plugin
插件是干嘛用的呢？顾名思义肯定是拓展功能的，执行更广泛的业务。比如打包优化，资源管理，注入环境等。用法也简单，要使用一个插件，只需要导入require它，然后把它添加到plugin数组中，注意，如果需要因为不同目的使用同一个插件，可以用new重新创建一个插件实例。看上面官方的配置，用了一个生成html的plugin，然后将打包后的结果注入到这个html文件当中。运行这个html文件，就是我们打包后得到的结果。当然，还有很多很多plugin。
后面的一些属性，就一笔带过啦。
本来是有实战的，但是我也是看了教学视频实战了一下。是个宝藏视频，就分享给大家啦。www.bilibili.com/video/BV11g...
总结
打包工具呢有许多的用处。比如多文件处理，像webpack的loader。提高开发效率，如可以配置devServer实现热更新。用插件提高性能，压缩代码体积等等。还能进行模块化处理。然后我们又简单的了解了一下webpack的一些配置项。以及webpack是如何运作的。相信学习了打包工具之后，我们对模块化工程化又有了进一步的了解。像我们的教授架就是提供了这些功能。这样你就知道了为什么能这么用。知其然并且知所以然。