个人理解：webpack可以将 .vue 文件转换为 .js 文件，而这个转换需要借助打包器vue-loader，这个打包器的下载是在node环境使用 npm 下载的（npm类似与一个应用商店，里面有很多包）；这样webpack在打包的时候是在node环境中运行的。
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下
image.png
image.png
PS：国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm命令了
node
node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。
包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。
webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将这些模块按照指定的规则生成对应的静态资源。
image.png
我门为什么使用webpack?
- 开发是时候需要一个开发环境，要是我们修改一下代码保存之后浏览器就自动展现最新的代码就好了（热更新服务）
- 本地代码的时候，要是调后端的接口不跨域就好了（代理服务）
- 为了跟上时代，要是能用上ES678N就好了（翻译服务）
- 项目要上线了，要是能一键压缩代码，图片什么的就好了（压缩打包服务）
- 我们平时的静态资源都是放到CDN上的，要是能自动帮我把这些搞好的静态资源怼到CDN上就好了（自动上传服务）
这么多服务，我们需要webpack帮我们去整合那么多的服务，而node的出现，赋予了我们操作系统的能力，要根据自己的需求来使用webpack，知道自己需要什么样的服务，webpack能不能提供这样的服务，如果可以，那么这个服务应该在构建中的呢个环节被处理。
1.如果与输入相关的需求，找entry（比如多页面就有多个入口）
2.如果与输出相关的需求，找output（比如你要定义输出文件的路径）
3.如果与模块寻址相关的需求，找resolve（比如定义别名alias）
4.如果与转译相关的需求，找loader（比如处理sass处理es678N）
5.如果与构建流程相关的需求，找plugin（比如我需要在打包完成后，将打包好的文件复制到某个目录，然后提交到git上）
网友评论