webpack，npm，node关系

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js,

而这个.vue文件装换需要打包器vue-loader,

这个vue-loader打包器是可以从npm上面下载（npm上面有很多资源包）,

npm下载文件之后，webpack打包文件的时需要node环境去运行

 

npm

1、npm是什么？

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

2、npm是干什么的？

！！这位大佬解释的很到位👇🏻

原文链接：https://blog.youkuaiyun.com/qq_37696120/article/details/80507178

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情：

去 jQuery 官网下载 jQuery
去 BootStrap 官网下载 BootStrap
去 Underscore 官网下载 Underscore
……

有些程序员就受不鸟了，用一个工具把这些代码集中到一起来管理吧！

node.js

1、node.js是什么？

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 

Node.js 可以在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。

webpack

1、webpack是什么？

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

2、我们为什么需要webpack

想想我们日常搬砖的场景：
1.开发的时候需要一个开发环境，要是我们修改一下代码保存之后浏览器就自动展现最新的代码那就好了（热更新服务）
2.本地写代码的时候，要是调后端的接口不跨域就好了（代理服务）
3.为了跟上时代，要是能用上什么ES678N等等新东西就好了（翻译服务）
4.项目要上线了，要是能一键压缩代码啊图片什么的就好了（压缩打包服务）
5.我们平时的静态资源都是放到CDN上的，要是能自动帮我把这些搞好的静态资源怼到CDN去就好了（自动上传服务）
巴拉巴拉等等服务，那么多你需要的服务，如果你打一个响指，这些服务都有条不紊地执行好，岂不是美滋滋！所以我们需要webpack帮我们去整合那么多服务，而node的出现，赋予了我们去操作系统的能力，这才有了我们今天的幸福（kubi）生活(manong)。
所以我觉得要根据自己的需求来使用webpack，知道自己需要什么样的服务，webpack能不能提供这样的服务，如果可以，那么这个服务应该在构建中的哪个环节被处理。

• 如果与输入相关的需求，找entry（比如多页面就有多个入口）
• 如果与输出相关的需求，找output（比如你需要定义输出文件的路径、名字等等）
• 如果与模块寻址相关的需求，找resolve（比如定义别名alias）
• 如果与转译相关的需求，找loader（比如处理sass处理es678N）
• 如果与构建流程相关的需求，找plugin（比如我需要在打包完成后，将打包好的文件复制到某个目录，然后提交到git上）

抽丝剥茧之后，去理解这些的流程，你就能从webpack那一坨坨的配置中，定位到你需求被webpack处理的位置，最后加上相应的配置即可。