NPM和webpack的关系(转载):https://blog.csdn.net/cwh0908/article/details/90769823

NPM和webpack的关系(转载)

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

what is webpack?
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。即WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

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

什么意思呢?看下图,从菜鸟教程上盗的图↓

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

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

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

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

  • 网站
  • 注册表(registry)
  • 命令行工具 (CLI)

网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。
注册表 是一个巨大的数据库,保存了每个包(package)的信息。
CLI 通过命令行或终端运行。开发者通过 CLI 与 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

 

NPM和webpack的关系(转载)的更多相关文章

  1. 谈谈NPM和Webpack的关系

    为什么有NPM: 当包引入数量很多时管理就成为了一个问题,这个就是npm为开发者行了方便之处,npm已经为你做好了依赖和版本的控制,也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来,进而 ...

  2. nvm、npm、nodejs的关系(转载)

    nvm.npm.nodejs的关系 为什么要了解nvm.npm.nodejs的关系: reactNative的项目构建都是有这几个工具进行构建管理. 掌握他们的关系,就能了解reactNative项目 ...

  3. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  4. npm、webpack、vue-cli

    Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...

  5. npm、webpack、vue-cli 快速上手版

    Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...

  6. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  7. D1.1.利用npm(webpack)构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

  8. webpack入门指南(转载)

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  9. npm安装webpack失败(mac和window都可能会遇到这样的情况,以下问题主要以mac为例)

     问题描述:我想查看一下webpack的版本,于是输入了命令webpack -v, 结果如下图所示: 注:这里提示我们要安装webpack-cli,是因为到了webpack4, webpack 已经将 ...

随机推荐

  1. 51 Nod 阶乘后面0的数量

    1003 阶乘后面0的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 72 ...

  2. 18.Python格式化字符串(格式化输出)

    Python 提供了“%”对各种类型的数据进行格式化输出,例如如下代码: price = 108 print ("the book's price is %s" % price) ...

  3. 解决eclipse无法部署工程到tomcat运行的问题

    当在tomcat想加入工程时在列表没发现要的项目时, 引起这个错误提示的原因是:项目里的.project文件和.settings文件的缺失或者错误.而不能适用于现在的tomcat. 解决办法如下: 右 ...

  4. [翻译]C#中异步方法的性能特点

    翻译自一篇博文,原文:The performance characteristics of async methods in C# 异步系列 剖析C#中的异步方法 扩展C#中的异步方法 C#中异步方法 ...

  5. ASP.NET postback with JavaScript (UseSubmitBehavior)

    ASP.NET postback with JavaScript Here is a complete solution Entire form tag of the asp.net page < ...

  6. vue初级 总结

    mvvm m:代表 data v 代表 view vm 代表 Vue 的实例 v-cloak 指令 解决闪烁的问题 需要在 style 标签中加入 [v-cloak];{ display:none } ...

  7. linux挂载本地镜像

    //创建挂载目录 mkdir /media/cdrom //挂载镜像 mount -t iso9660 /dev/cdrom /media/cdrom 提示:mount:block device /d ...

  8. 一起学vue指令之v-text

    一起学vue指令之v-text 一起学 vue指令 v-text  指令可看作标签属性 v-text的功能和v-html很相似,都是在容器标签内控制字符串内容的输出,v-text输出纯文本,而v-ht ...

  9. [NLP] 语义网络与知识图谱入门(二)

    语义网络与知识图谱入门(二) OWL 本体声明 owl用owl:Ontology来声明一个本体.rdf:about属性为本体提供一个名称或引用.根据标准,当rdf:about属性的值为"&q ...

  10. P2239 螺旋矩阵

    P2239 螺旋矩阵 题解 这题看上去是个暴力,但是你看数据范围啊,暴力会炸 实际上这是一道数学题QWQ 先看看螺旋矩阵是个什么亚子吧 好吧,找找规律 1 2 ... ... ... ... ... ...