了解前端的打包工具

港控/mmm° 2023-06-03 10:00 5阅读 0赞

作为一个运维，虽然我会写一些简单的页面，其中包括了html、css、js、jQuery等，但是我并没有用过vue、react等模块化框架。还有对于前端同事们经常提到的webpack、npm、node等，也不是很了解，近乎于一个小白。  
对前端项目进行自动化打包之前，了解上面的概念，我认为是很有必要的。

React和Vue一样，是一个前端的js框架。对于我们运维来讲没什么好说的，有时间的话可以去学习一下，这样在用django的时候，前端就可以用Vue或者React写了，比较方便，也比较高大上（但是真的没时间啊，手动狗头）。

## 一、webpack介绍 ##

经常听到前端的大佬们说是用webpack打包的，那么到底webpack是个什么东东呢？  
1、webpack是什么  
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

2、webpack的核心作用  
模块化开发中，我们会编写大量模块，如果不打包就进行上线，那么页面加载或交互时，将会发起大量的请求。为了性能优化，需要使用webpack这样的打包器对模块进行打包整合，以减少请求数。就像简单的vue项目，所有组件最终将被打包到一个app.js中。相较于无差别打包依赖模块的传统打包器（Grunt和Gulp等），webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack打包出的bundle不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。

## 二、npm介绍 ##

介绍了webpack，我们可能会疑问，我的JS，CSS，HTML文件分开写，挺好的呀，为什么要使用webpack工具，进行复杂的各项配置。在传统前端开发模式下，我们确实是按照JS/CSS/HTML文件分开写的模式就可以，但是随着前端的发展，社区的壮大，各种前端的库和框架层出不穷，我们项目中可能会使用很多额外的库，如何有效管理这些引入的库文件是一个大问题，而且我们知道基于在HTML中使用

npm 由三个独立的部分组成：网站、注册表（registry）和命令行工具（CLI）  
网站是开发者查找包（package）、设置参数以及管理npm使用体验的主要途径。  
注册表是一个巨大的数据库，保存了每个包（package）的信息。  
CLI通过命令行或者终端运行。开发者通过CLI与npm打交道。

一般来说提起npm有两个含义，一个是说npm官方网站，一个就是说npm包管理工具。npm社区或官网是一个巨大的Node生态系统，社区成员可以随意发布和安装npm生态中的包，也就是不用在重复造轮子了，别人造好了，**你直接安装到你的项目中就可以使用，但是因为前面说了，当包引入数量很多时管理就成为了一个问题，这个就是npm为开发者行了方便之处，npm已经为你做好了依赖和版本的控制，也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来，进而关注你的业务而不是库的管理。**

而**webpack就是将你从npm中安装的包打包成更小的浏览器可读的静态资源，这里需要注意的是，webpack只是一个前端的打包工具，打包的是静态资源，和后台没有关系，虽然webpack依赖于node环境**。

## 三、webpack npm node之间的关系 ##

webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包。

webpack的运行依赖于node环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源，和后台没有关系，也就是说不依赖于node。

npm产生于node社区，是node的官方包管理工具，当安装好node的时候，npm就自动安装好了。

正是因为npm的包管理，是的项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让 浏览器识别，而手动处理又是非常的繁琐的，这就是webpack工具存在的意义。

参考文章：

[https://blog.csdn.net/cwh0908/article/details/90769823][https_blog.csdn.net_cwh0908_article_details_90769823]

[https_blog.csdn.net_cwh0908_article_details_90769823]: https://blog.csdn.net/cwh0908/article/details/90769823