Vue 项目之 Webpack 的基础打包（2）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. Vue 项目加载的文件有哪些呢

• JavaScript 的打包：
  • 将 ES6 的语法转换成 ES5 的语法；
  • TypeScript 的处理，将其转换成 JavaScript；
• CSS 的处理：
  • CSS 文件模块的加载、提取；
  • Less、Sass 等预处理器的处理；
• img、font 资源文件的处理：
  • 图片 img 文件的加载；
  • 字体 font 文件的加载；
• HTML 资源的处理：
  • 打包 HTML 资源文件（HTML 文件是整个项目静态资源的入口）；
• Vue 项目的 SFC 文件（.vue 文件）的处理：
  • .vue 文件最终必然需要转成 JavaScript 或 CSS 的，其转换过程会交给 Webpack 的 loader 来完成，后面会讲到；

以上，就是 Vue 项目通常需要加载的文件，也就是需要 Webpack 进行打包的文件。

2. Webpack 的使用前提

Webpack 也是用代码（最主要是 JavaScript 代码（99.8%））编写出来的，那必然需要一个环境来运行 JavaScript 代码，而 Webpack 需要的环境就是 Node 环境了。

因为 Webpack 的运行依赖 Node 环境[^1]，所以我们电脑上必须有 Node 环境。

• 所以我们需要先安装 Node.js，在安装 Node.js 时会帮我们自动安装 npm（全称 Node Package Manager，即“node包管理器”，我们用它来管理一些包）；

• 我当前电脑上的 node 版本是 v14.15.3，npm 版本是 6.14.9（你也可以使用 nvm 或者 n 来管理 Node 版本）；

• Node 的官网：nodejs.org/

  

建议下载 14.x 版本（或 14.x 版本以上）的 Node。

下载、安装完成 Node 之后，可以打开命令行终端，查看 Node 的版本和 npm 的版本：

只要能像上图那样成功看到版本信息，就说明 Node 安装成功了。

注：这里要求 Node 的版本在 14 以上，npm 的版本在 6 以上。

3. Webpack 的安装

既然要使用 Webpack 这个工具，那必然要先安装它。不过，Webpack 的安装和我们平时的安装（下载后双击安装文件进行安装）不太一样，我们是在命令行终端中（Windows 是 cmd，macOS 是 terminal.app）通过 npm 工具（前面讲过，安装 Node 时自动帮我们安装了的工具）来安装 Webpack 的。

在最新的版本（Webpack5）中，Webpack 的安装需要安装两个东西：webpack 和 webpack-cli（事实上，webpack-cli 的安装不是必须的，因为对于我们编译一个项目来说，并不需要这个 webpack-cli，像 Vue CLI 和 React 的脚手架中都没有 webpack-cli，甚至是把 webpack 的源码下载下来后让它帮助我们编译一段代码，也是不需要这个 webpack-cli 的。这个 webpack-cli 工具的作用是读取我们在命令行中使用的 webpack 命令及传递的参数。而在开始的学习中，我们将通过命令行的方式运行 webpack，所以需要安装 webpack-cli。不过，webpack-cli 本质上还是会去调用 webpack 的，我们执行 webpack 命令时，会先执行 webpack 的东西，然后 webpack 又去调 webpack-cli，而 webpack-cli 内部之后还是会调用 webpack，即过程是这样的：webpack -> webpack-cli -> webpack）。

webpack 和 webpack-cli 之间的关系：

• 执行 webpack 命令，会执行 node_modules 目录下的 .bin 目录下的 webpack；
• webpack 在执行时是依赖 webpack-cli 的，如果没有安装会报错；
• 而 webpack-cli 中的代码执行时，才是真正利用 webpack 进行编译和打包的过程；
• 所以在安装 webpack 时，我们需要同时安装 webpack-cli（不过第三方的脚手架事实上并没有使用 webpack-cli，而是类似于自己的 vue-service-cli 的东西）；

因此，再强调一下，因为我们下面是在命令行中进行操作的，所以需要安装 webpack-cli。

我们在电脑中打开命令行终端（我这里用的是 VS Code 中的终端），先来全局安装一下 webpack 和 webpack-cli：

npm install webpack webpack-cli -g

-g 也可以写成 --global，即全局的意思，意味着在任何目录下打开命令行都可以使用 webpack。如果要局部安装，则可以把 -g 换成 -D。

如果你电脑上原来就安装过 webpack，那么执行上面的命令会帮你安装 webpack 的最新版本。

安装成功后，可以通过 webpack -v 命令查看到安装的 webpack 的版本：

下面，我们就可以去使用 webpack 了。