【前端】webpack、npm、node、nodejs之间的关系

转自：https://blog.csdn.net/AngelLover2017/article/details/84801673

 

简略：

 

1、手撸HTML,CSS,JS的时代已经过去，前端产品，不再是手撸HTML了，他们会先安装node.js，用npm，用webpack，用yarn，用各种cli。

2、vue-cli

是一个vue项目的脚手架，可以快速的构建一个vue的基于npm的模块化项目，vue内部的打包机制其实还是借助webpack；

3、webpack

是一个打包工具，可以帮你把你通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源；

4、npm包管理工具

传统的HTML,CSS,JS管理太繁杂，模块化就是其中一项成功实践，而npm就是为模块化产生。

npm 由三个独立的部分组成：

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

webpack就把 你通过npm中安装的包  打包成更小的浏览器可读的静态资源

5、webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包；
webpack的运行依赖于node的环境。npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制

 

 

前言：

现代前端的发展已经超乎了所有人的想象，曾几何时我们还在手撸HTML,CSS,JS，然而时过境迁，那样的时代几乎已经一去不返了。现在大部分前端开发vue，不，开发所有前端产品，不再是手撸HTML了，他们会先安装node.js，用npm，用webpack，用yarn，用各种cli。

调试时也不再是用浏览器打开静态html调试了，直接yarn serve后在本地就会形成http://localhost:xxx的标准网站结构，而且页面内容热重载，任何代码改动，页面都会自动更新。

数据交互时也不再需要与后端工程师面对面交流，也不再需要学习任何一种后端语言，或者模板语言（类似于freemarker这类的），直接就是API文档沟通彼此了。

产品发布时，也不再是各种js,css,img文件夹了，而是对各种js、vue、ts源代码进行编译打包，最后形成了一个dist文件夹，里面拥有打包混淆好鬼都没法理解的最终文件，直接扔进nginx中就能跑。

链接：https://www.zhihu.com/question/375078655/answer/1042996204
 

所以用工具、框架开发前端是大流。

 

入门前端的坑也很久了，以前很多大小项目，前端都是传统式开发，一直在重复造轮子；接触VUE后，对vue-cli有了解后，仅仅知道vue-cli是一个vue项目的脚手架，可以快速的构建一个vue的基于npm的模块化项目，vue内部的打包机制其实还是借助webpack；但是对webpack\npm\node\nodejs这几个在前端模块化中的高频词总是傻傻分不清，不知道他们之间的具体关系，今天花了些功夫查阅了网上大神的回答和官方教程给出的解释写一篇小白文，总结一下这几个概念或者说高频词汇之间的关系

 

what is webpack?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

什么意思呢？看下图

webpack是一个工具，这个工具可以帮你处理好各个包/模块之间的依赖关系（modules with dependencies），并将这些复杂依赖关系的静态文件打包成一个或很少的静态文件，提供给浏览器访问使用；除此之外，webpack因为可以提高兼容性，可以将一些浏览器尚不支持的新特性转换为可以支持格式，进而减少由新特性带来的浏览器的兼容性问题

 

好，我们通过介绍，我们有个概念，webpack是一个打包工具，可以帮你把你的项目这里的项目其实就是指通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源

what is npm?

介绍了webpack，我们可能会疑问，我的JS，CSS，HTML文件分开写，挺好的呀，为什么要使用webpack工具，进行复杂的各项配置。在传统前端开发模式下，我们确实是按照JS/CSS/HTML文件分开写的模式就可以，但是随着前端的发展，社区的壮大，各种前端的库和框架层出不穷，我们项目中可能会使用很多额外的库，如何有效管理这些引入的库文件是一个大问题，而且我们知道基于在HTML中使用<script>引入的方式，有两个弊端，一个是会重复引入，二是当库文件数量很多时管理成为一个大难题。
面对这样的局面，为了简化开发的复杂度，前端社区涌现了很多实践方法。模块化就是其中一项成功实践，而npm就是这样在社区 其实就是node社区中产生的

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
npm 由三个独立的部分组成：

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

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

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

what is node or nodejs？

其实node和nodejs两个概念没有太大差别，我个人认为唯一的区别就是，人们说起node的时候语境更多的是再说node环境，而说nodejs时更多的是在说node是一门可以提供后端能力的技术。本质上来说，node就是nodejs，nodejs就是node

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

node环境基于V8引擎提供了一种可以让JS代码跑在后端的能力，这就是node。其实这里的node本身和我们这篇讲的前端模块化没啥关系。但是因为npm是产生于node社区，node中也是通过npm来加载模块的，所以有必要说一下他们之间的关系。

npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制

webpack npm node之间关系？

webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包；
webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目
npm是于Node社区中产生的，是nodejs的官方包管理工具，当你下载安装好node的时候，npm cli就自动安装好了
正是因为npm的包管理，使得项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就是webpack工具存在的意义

原文链接：https://blog.csdn.net/AngelLover2017/article/details/84801673