webpack

---

前言

今天给大家详细介绍一下webpack，webpack配置vue-cli暂时先不详细讲解了哈~有点麻烦哈哈

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、市面上常用的前端工程化工具有哪些？

gulp：一般比较老的项目在用，Node.js的流式操作。
Borwaerify：webpack的前身，处理AMD模块化，功能比较有限。
webpack：webpack：目前比较主流。
rollup：比较小众，可以将分层比较多的模块化给它进行组合，编译成分层比较少的，节省性能。
parcel：比较小众，多线程编译，速度较快。
Fls：比较小众，是百度的产品。
vite：基于rollup实现的，和vue3.0一起出来的，打包和编译速度大大提高了，vue3使用的就是vite打包。

二、webpack是什么？

webpack是静态模块打包工具，是基于node.js运行的，煮是要功能是压缩袋吗，压缩图片，解析ES6，解析sass语法，代码热更新等

官网：https://v4.webpack.docschina.org/

三、webpack构成部分？

entry 入口文件：负责处理我们页面根路径进行加载

output 出口文件：负责帮助我们编译后的文件输出

plugin 辅助插件：整体的插件配置，基于webpack的生态，很多插件得到应用，我们可以借助插件提升我们的开发效率，对webpack没有功能的补充。

loader编译器：本质是一个函数，该函数对接收到的内容进行转换，返回转换后的结果，只因浏览器只认识js，所以loader成了翻译官，对其他类型的资源进行预处理的工作，简而言之就是把代码转换成浏览器认识的东西

四、webpack工作原理？

其实可以看作一个模块打包机，它做的事情是分析你的项目结构，找到js的模块以及其他的一些浏览器不能直接运行的拓展性语言，并将其打包为合适的格式提供给浏览器使用，在webpack3.0出现后，webpack还肩负起了优化项目的责任。

五、webpack打包原理？

把一切都视为模块，不管是css，js，image还是html，都可以相互引用，通过定义entry.js入口文件，对所有依赖的文件进行追踪，将各个模块通过loader编译器和plugin辅助插件处理，然后打包在一起。

五、webpack配置vue-cli？

其实就是根据官网，然后一点一点把自己需要的东西安装上去，再在webpack.config.js里面进行相关代码的配置（入口文件，出口文件，开发环境等等的配置即可），这里就暂时不一一举例了~