webpack 和 webpack-cli

webpack 的安装目前分为两个：webpack、webpack-cli

webpack、webpack-cli 的区别

在命令行中执行 webpack 命令，会执行 node_modules 下的 .bin 目录下的 webpack 文件，webpack 的执行依赖 webpack-cli，如果没有安装webpack-cli 就会报错。在 webpack-cli 中代码执行时，才是真正利用 webpack 进行编译和打包的过程；

npm install webpack webpack-cli –g    #全局安装
npm install webpack webpack-cli –D    #局部安装 (项目中使用)

全局安装 和 局部安装 的区别？

1. 如果只有全局的 webpack，那么打包的时候，用了全局的 webpack，不同电脑的 webpack 版本不同会导致包的安装版本不同。
2. 局部安装：每一个项目都有自己的 webpack 的版本， –D 是开发时依赖，定义了统一的 webpack 版本，打包的时候不会出现包的版本问题。

直接在命令行中执行 webpack 找的是全局的 webpack，如果要用局部的 webpack 的话：

1. 去 node_modules 中的 .bin 中找 webpack：./node_modules/.bin/webpack
2. 执行npx webpack默认找 node_modules 中的 .bin 下的 webpack 文件
3. 在 package.json 中写脚本 "build": "npx webpack"，在使用的时候 npm run build 相当于执行了 webpack 指令。

webpack 是如何确定我们的入口的呢？

当我们运行 webpack 时，webpack 会查找当前目录下的 src/index.js 作为入口，如果没有存在 src/index.js 文件，就会报错。

webpack 是如何对我们的项目进行打包的呢？

根据命令或者配置文件找到入口文件，从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）