webpack是啥？以及webpack、nodejs、npm 的关系

   目录

1. webpack nodejs npm 傻傻分不清？

2. 什么是 webpack?

3. webpack打包原理

4. 核心概念

---

1. webpack nodejs npm 傻傻分不清？

概述说：

npm是nodejs包的管理工具，node中也是通过npm来加载模块的

webpack是npm生态中的一个模块

webpack是基于nodejs实现的，在执行打包压缩的时候依赖nodejs，没有nodejs就不能使用

详细点：
1）nodejs是js后端运行平台，可以把它看成 java体系中对应的jdk，是三个里面最基础的。

2）npm是nodejs的包管理工具，可以把它看成maven中包依赖管理那部分。node和nodejs就是同一个东西，只是名字不同而已，npm只是nodejs的一个模块，node中也是通过npm来加载模块的，当你下载安装好node的时候，npm cli就自动安装好了。而webpack是npm生态中的一个模块。

3）webpack是前端工程化打包工具，可以把它看成maven中工程自动化那部分
webpack是基于nodejs实现的，打包的是静态资源，跟后台是否用nodejs无关，即使webpack在执行打包压缩的时候依赖nodejs，没有nodejs就不能使用。但，webpack打包后的web工程，不需要一定在nodejs环境中运行， 比如在apache中是可以运行的。

2. 什么是 webpack?（即：js模块化  打包）

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的浏览器可识别的静态资源。

3. webpack打包原理

是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。
 

4. webpack的核心概念

（1）entry（入口）：webpack从该模块开始构建并计算出直接、间接依赖或库。

（2）Output（输出）：告诉webpack如何命名输出的文件、输出的目录

（3）loader：文件转换器，对一些非js文件处理成webpack能够处理的模块。例如把es6转为es5，scss转为css等

（4）plugin（插件）：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。

（5）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。如果没有 chunk 加载操作，就不能使用远程模块。

5. 有关webpack - 构建流程_Realizee的博客-CSDN博客

参考资料：

概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)

webpack的打包原理是什么-常见问题-PHP中文网

webpack系列--浅析webpack的原理 - saucxs - 博客园