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

转载来源： https://blog.51cto.com/liangchaoxi/4052418

简略：

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中使用