【Webpack】了解Webpack

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*
文章若有错误或某个内容有更优的解决方案，还望指正！*

---

Webpack

了解

webpack指南 https://webpack.docschina.org/guides/

webpack文档 https://webpack.docschina.org/

前端工程项目的打包和编译工具

最新 Webpack 5

目前在前端开发之中，使用各种 MVVM / MVC 的JS框架开发成为主流，但是在JS框架开发中，项目文件一般是对应JS框架的自定义文件类型

比如 Vue.js 的demo.vue，React.js 的 demo.jsx

Webpack 就是用来将对应的 框架自定义文件和项目中对应JS文件等，编译成 浏览器能运行的 html、CSS、JS文件 ，当然也不止如此，参考

现在前端项目开发，多使用 React、vue 等前端框架，以及ES6模块语法、Sass等css预处理器，以及其他媒体资源，这些项目代码无法直接在浏览器运行。

webpack就是将项目文件打包编译成浏览器能够运行的html、css、js文件的项目打包工具，同时webpack 还具备 压缩代码、代码兼容性处理等特性，大大的提升代码性能

将 Webpack 输出的文件叫做 bundle

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。———— 来自官网

---

为什么使用

传统的Web应用开发，在浏览器运行JavaScript的两种方式

• 一：需要在html文件通过script脚本引入有不同功能作用的JS文件，若是script脚本太多，会出现网络请求瓶颈

• 二：在html文件中引入一个包含所有项目代码的JS脚本，若项目代码巨大，会导致各种JS文件大小过大，也会存在作用域和可维护性方面

是否可以有一种方式，不仅可以让我们编写模块，而且还支持任何模块格式，并且可以同时处理其他资源？

这就是 webpack 存在的原因。

它是一个工具，可以打包你的 JavaScript 应用程序（支持 ESM 和 CommonJS），可以扩展为支持许多不同的静态资源，例如：images, fonts 和 stylesheets。

webpack 关心性能和加载时间；它始终在改进或添加新功能，例如：异步地加载 chunk 和预取，以便为你的项目和用户提供最佳体验。