前言

我们不管是 Vue 项目或 React 项目或 类库，都会用到 wepack 。
可访问官网有详细的介绍。
在这里，我稍微总结了一下，说说自己的理解，望大家勿喷 (^o)/~

进入主题

webpack 是一个静态模块打包工具。在 webpack 看来，项目里所有资源皆模块，利用资源的依赖关系，把各模块之间关联起来。
简单讲就是 webpack 对有依赖关系的多个模块文件进行打包处理后，生成浏览器可以直接高效运行的资源。

那么问题来了，webpack 是如何找到资源和资源间的依赖的呢？

其实也很简单，就是通过 入口文件 开始，利用 递归 找到直接依赖或间接依赖的所有模块，并在内部构建一个能映射出项目所需的所有模块的 依赖图，并进行 webpack 打包生成一个或多个 bundle 文件。
所谓依赖就是， A 模块中引入（import / require）了 B 模块，即 A 模块依赖了 B 模块，正式通过这种引入文件来确定了依赖关系。

打包是用的 webpack 命令即：npm webpack
从 webpack 4.x 开始，把 webpack 拆成 webpack 和 webpack-cli 两部分，分工如下：
webpack: 负责 Js 的打包工作
webpack-cli：解析 webpack 命令，命令内部使用 webpack 的功能
并且 webpack 能解析打包各种模块规范的 Js 代码，包括：ES6、Commonjs、AND/Requirejs 以及 CMD/Seajs。

注意：webpack 不用全局安装，只需要局部下载即可。
因为一个公司会有很多项目，有老的也有新的，若使用全局的可能会引起不确定问题。最好是每个项目使用 npx命令使用自己的 webpack。也可以把 webpack 配置到 packsge.json 的 scripts 中，即使用 npm scripts 运行的 webpack 命令默认是先查找局部的 webpack。

有几个核心的概念也需要了解一下：

mode：模式
有三个值：none、development、production
development ( 开发模式会生成普通 Js 文件)
production ( 生产模式会生成压缩的 .min.Js 文件 )
entry：入口
output：出口
loader：模块加载器
webpack 本身只能打包 Js 文件，对 Css、img 等其他资源不能处理，但我们最终是要打包所有资源，所以有两种方式，一种是把 Css文件放到 Js 文件中去，另一种就是把图片和 Js 文件建立一种关系，这里就用到了模块加载器。
常用的 loader 有：css-loader、style-loader、file-loader 和 url-loader 等
plugin：插件
webpack 只能打包文件，不能处理文件，比如拷贝文件或压缩文件等，这时就用引入对应的 plugin。
常用的 plugin 有：commons-chunk-plugin（提取公共代码）、terser-webpack-plugin（支持压缩 ES6 Webpack4)