安装 Webpack

领航猿麦兜
326 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

安装 Node.js

在安装 Webpack 之前，我们要确保本地已经安装了 Node.js，因为 Webpack 是构建在 Node.js 基础之上。

在浏览器，访问一下 Node.js 官网，在官网的首页面上，我们可以看到非常醒目的列出要下载的 Node.js 的链接。

image.png   Node.js 官网首页也给我们列出两个不同的版本，我们该如何选择呢？

第一个 Node.js 版本是 16.16.0 LTS，LTS 英文全称  Long Term Support，是长期支持的版本，它一般推荐我们大多数的用户去下载。

第二个 Node.js 版本是 18.5.0 Current，当前版本它包含了 Latest Features，就是最新的一些特性。一般情况下，对于我们开发用户，推荐大家去下载 LTS 版本。

这里需要注意，我们再去安装 Node.js 的时候，我们一定要去安装最新的 LTS 版本，Node.js 首页面上列出的就是最新 Node.js 长期支持稳定版本。如果是安装比较老的 Node.js LTS 版本，可能会缺少 Webpack 一些功能，或者是缺少相关的 package，导致我们项目运行出问题。

如何下载呢？大家点击 16.16.0 LTS 这个下载链接按钮，跳转到下载列表页。

image.png

根据你自己操作系统选择对应的操作系统的 Node.js 版本。比如 MacOS 下载 .pkg 文件，Windows 下载 .msi 文件。下载完成之后，根据 Node.js 提示进行安装即可，这里我们不做过多的赘述。

打开 cmd 命令终端，使用命令检查 Node.js 环境是否安装成功。

image.png

可以看到 Node.js 成功的安装，版本是 16.15.1，这是我本机安装的 Node.js。其实 Node.js 安装的同时，会自动安装 npm 工具，版本是 8.11.0。npm 英文的全称是 Node Package Manger，是 Node.js 包管理工具。我们知道 Webpack 是基于 Node.js 开发的，安装 Webpack 就需要通过 npm 把 Webpack 当成一个 Package 进行安装和管理。

安装 Node.js 成功之后，需要进行 Node.js 环境配置，具体配置大家可以参考《》文献。

安装 Webpack

环境配置成功之后，我们正式安装 Webpack，我们先梳理一下，Webpack 安装有两种情况：

  • 一种我们可以在全局里安装 Webpack；
  • 一种我们可以在本地的工作目录下安装 Webpack。

另外，安装 Webpack 我们需要安装两个包，一个是 Webpack 主包，一个是 webpack-cli，webpack-cli 表示我们可以在命令行里面执行 Webpack 的命令。

首先，我们通过全局安装 Webpack，执行如下命令安装 Webpack。

npm install webpack webpack-cli --global

global 顾名思义就是在全局的环境下安装 Webpack，这样做的好处，可以让我们在任何的目录下面去执行 Webpack，我们回车稍等片刻，我们就在全局里安装好了 Webpack。

image.png   安装成之后，通过执行 webpack -v 命令获查看当前 webpack 和 webpack-cli 版本。

image.png

我们发现我们已经在全局范围内安装好 Webpack，webpack 的版本是 5.73.0，webpack-cli 版本是 4.10.0。webpack-dev-server not installed 表示没有安装 webpack-dev-server，这个具体是用作什么，我们在后续章节详细的介绍。

切换目录，执行 webpack -v 命令。可以看到我们 Webpack 照样可以执行。

image.png

其实我们在任何的目录下面都可以运行 Webpack 命令，这就是在全局里安装 Webpack 的好处。

但是事实上，我们并不推荐大家在全局里安装 Webpack，因为，这样会使你项目的 Webpack 锁定到某个版本里，并且你在使用不同的 Webpack 版本的项目里边，可能会导致构建失败。

另外还有一个问题就，如果是一个团队协作的项目，你的小伙伴如果不知道在全局里安装 Webpack，构建项目的时候也会有问题。因此，我们推荐大家还是在本地的工作目录去安装 Webpack。

那在本地安装 Webpack 之前，我们得需要去安装一个 npm 包管理的配置文件，执行如下命令。

npm init -y

这样的话在我们项目的根目录下面会产生一个 package.json 文件，这个文件默认自动配置一些配置，大家学过 Node.js，应该知道这些配置是什么，这里我们并不关心这些是什么。

image.png  

{
  "name": "part-one-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

下面我们开始准备要在本地的环境下安装 Webpack，我们执行下面安装命令在本地目录下安装 Webpack。

npm install webpack webpack-cli --save-dev

等待片刻以后，在本地的工作目录下面就安装好这两个包，我们发现，在项目中生成 node_moduls 目录，在这个目录中就是我们这两个包所需一些依赖的包。

同时还生成 package-lock.json 文件，表示我们当前的这两个包的一些依赖，我们现在先不用管它具体配置什么内容，而且大家也不要随便的去修改这个 JSON 文件。

avatar
文章
阅读
粉丝