全面掌握Webpack4.0 (二)Webpack的正确安装方式（持续更新…

本片文章给大家介绍一下如何正确的安装webpack

一.安装Node.js环境并检查是否安装成功（推荐安装LTS版本，至于如何安装在此就不做说明了）
二.新建一个文件夹，作为项目目录，自定义名就叫webpack-demo，并用编辑器打开，我这里使用的是VSCode

目前该项目是一个空项目。
三.在终端通过npm init命令对项目进行初始化（一路回车就可以），最后在项目目录中会出现一个package.json文件，这个文件描述和该项目相关的一些信息。

四.全局安装webpack以及webpack-cli（不推荐）
安装命令：
npm install webpack webpack-cli -g
（非常不推荐全局安装webpack，因为不同的项目使用的webpack的版本可能不同，所以推荐在项目内部安装webpack）
查看版本号命令：
webpack --version

在项目内部安装webpack之前首先我们要卸载掉刚刚全局安装的webpack
使用命令：
npm uninstall webpack webpack-cli -g
检查是否卸载成功，依然使用webpack --version命令：如下报错说明找不到webpack了，即为卸载成功。

五.在项目内部安装webpack以及webpack-cli（推荐）
在项目中运行以下命令：
npm install webpack webpack-cli -D
安装之后，发现项目中多出了一个node_modules文件夹和一个package-lock.json文件

然后我们使用webpack --version查看是否安装成功，却发现报错：

发现和之前的报错一样，那是因为我们没有安装成功吗？其实并不是，我们执行以下的命令试一下能否查看到版本号：
npx webpack --version

我们发现找到了版本号，说明在项目内通过npm install webpack webpack-cli -D命令的方式安装webpack成功了，那么问题来了，为什么我们在之前通过全局的方式安装webpack使用webpack --version就可以查看版本号，但是在项目内部使用webpack --version就不行呢？其实原因是webpack --version这个命令会默认去全局查找webpack，所以全局安装的就没有问题，项目内安装的就会报错。但是我们使用npx命令查看版本号，这个命令内部是去我们项目内的node_modules文件夹中去查webpack，所以通过npx webpack --version命令的方式可以正确获取到版本号。

补充说明:webpack和webpack-cli的区别：
webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后，webpack启动命令行的代码放入了webpack-cli 中。如果只安装了webpack，只能在nodejs环境中使用，就不能在命令行中使用。

全面掌握Webpack4.0 (三)Webpack的入门配置（持续更新…