webpack npm node之间关系?

1 篇文章 0 订阅
1 篇文章 0 订阅
webpack是一个前端资源加载/打包工具,处理模块依赖并转换为浏览器可用的静态资源,实现按需打包。npm是Node.js的包管理工具,提供包的查找、管理和发布功能。Node.js基于Chrome V8引擎,提供服务端JavaScript运行环境。webpack依赖node环境运行,通过npm安装和管理。三者关系:webpack借助npm在Node环境中进行前端项目打包。
摘要由CSDN通过智能技术生成

what is webpack?

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

webpack的核心作用

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

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


what is npm?

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

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

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


what is node or nodejs?

简单的说 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/cwh0908/article/details/90769823

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值