webpack和nodejs关系

webpack和nodejs关系 #

webpack可以将 .vue 文件转换为 .js 文件，而这个转换需要借助打包器vue-loader，这个打包器的下载是在node环境使用 npm 下载的（npm类似与一个应用商店，里面有很多包）；这样webpack在打包的时候是在node环境中运行的。

  • nodejs是js后端运行平台，可以把它看成java体系中对应的jdk，是三个里面最基础的。
  • npm是nodejs的包管理工具，可以把它看成maven中包依赖管理那部分。
  • webpack是前端工程化打包工具，可以把它看成maven中工程自动化那部分

npm #

npm是什么 # 

是Node.js的包管理工具，是全球最大的开发库生态系统（注册表）

为何产生？ # 

当网站的依赖的js越来越多，程序员发现这是一件麻烦事：
去JQuery官网下载JQuery，去 BootStrap 官网下载 BootStrap ，去 Underscore 官网下载 Underscore .......没完没了
于是npm就出来了（全称 Node Package Manager 包管理工具），大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，并且模块A依赖B，B依赖C、D，此时只需安装A即可，因为此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来；
这一点和maven、gradle十分相似，只不过maven、gradle是用来管理java jar包的，而npm是用来管理js的。

常用命令 #

  • npm init：初始化一个项目包，包含package.json文件
  • npm install：package.json的devDependencies字段里的插件全部安装到node_modules下

base64A1

base64A2

node # 

node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。
包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。

webpack # 

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将这些模块按照指定的规则生成对应的静态资源。

baseA4

我们为什么使用webpack? # 
开发是时候需要一个开发环境，要是我们修改一下代码保存之后浏览器就自动展现最新的代码就好了（热更新服务）
本地代码的时候，要是调后端的接口不跨域就好了（代理服务）
为了跟上时代，要是能用上ES678N就好了（翻译服务）
项目要上线了，要是能一键压缩代码，图片什么的就好了（压缩打包服务）
我们平时的静态资源都是放到CDN上的，要是能自动帮我把这些搞好的静态资源怼到CDN上就好了（自动上传服务）
这么多服务，我们需要webpack帮我们去整合那么多的服务，而node的出现，赋予了我们操作系统的能力，要根据自己的需求来使用webpack，知道自己需要什么样的服务，webpack能不能提供这样的服务，如果可以，那么这个服务应该在构建中的呢个环节被处理。
1.如果与输入相关的需求，找entry（比如多页面就有多个入口）
2.如果与输出相关的需求，找output（比如你要定义输出文件的路径）
3.如果与模块寻址相关的需求，找resolve（比如定义别名alias）
4.如果与转译相关的需求，找loader（比如处理sass处理es678N）
5.如果与构建流程相关的需求，找plugin（比如我需要在打包完成后，将打包好的文件复制到某个目录，然后提交到git上）
4人点赞
工程化

其它 #

  • 提问：

  • 1.webpack安装一般使用npm，那么也需要安装node，而后台不想用nodeJs编写，这样是不是多余，毕竟不用nodeJs,为什么要因为使用webpage而被动安装node呢？（请原谅我对这方面知识的欠缺= =）

  • 2.不仅是vue.js使用npm，很多好的框架和工具都使用，这里还请大神告诉我npm、node、nodejs他们之间的关系，好混乱啊。。

  • 问题一：

  • 使用webpack跟后台是否用nodejs无关，因为webpack在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack就好比你要使用电灯，首先必须得有电流，而电流是需要发动机来发电的，你不能因为说我不要发动机而直接使用电流吧~

  • 问题二：

  • node和nodejs就是同一个东西，只是名字不同而已，而npm只是nodejs的一个模块

webpack是基于nodejs实现的， Node.js 是前端工程化的重要支柱之一

webpack打包后的web工程，不需要一定在nodejs环境中运行 比如在apache中也可以运行