webpack打包工具安装webpack

前言：

我在b站上面学习Vue的时候需要使用webpack进行模块化，那就安装webpack，老师说由于webpack需要nodejs的支持，所以我们还需安装nodejs，所以我就先安装nodejs，然后在安装webpack

小贴士： 该项目配套后端代码已经新鲜出炉》》》点我去看

第一步：安装nodejs

下载：

老师上面nodejs的版本是10.13.0，所以我也安装该版本，在nodejs官网上面是最新的12.8.4，这不符合我的要求，于是我找到了所有nodejs历史版本的链接（https://nodejs.org/dist/），由于我本次使用的nodejs版本是10.13.0，所以我找到了nodejs v10.13.0所有类型安装文件的链接（https://nodejs.org/dist/v10.13.0/），接下来我找到了node-v10.13.0-x64.msi（.msi格式：Windows installer开发出来的程序安装文件，使用它不用配置环境变量；.zip：解压即可用，但是需要配置环境变量；）的地址是：https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi，你点击就可以下载了，由于下载速度很快，我就不给你提供安装包了

安装：

双击下载的node-v10.13.0-x64.msi，点击Next：

更改你认为合适的nodejs安装路径：

点击Next：

其中：

npm package manager表示npm包管理器

online documentation shortcuts 在线文档快捷方式

Add to PATH添加node安装路径到环境变量

这就是我们使用.msi类型的文件安装的时候不需要添加环境变量的原因。

然后是否勾选必要的工具去编译native模块：

点击install：

安装完成后关闭安装窗口，由于我们使用的是.msi类型文件安装的，所以不需要配置环境变量

检查安装：

打开DOS命令窗口，输入node -v，如何你可以看到版本号10.13.0，说明你就安装成功了

更改成淘宝镜像：

如果不更改淘宝镜像，你如果通过npm去安装webpack，那页面直接就不会动了，你就不要去试了，所以更换成淘宝的源很有必要：直接在DOS窗口中输入：npm config set registry https://registry.npm.taobao.org，点击回车就更换成功了，可以通过npm config get registry命令去查看镜像是否更换成功，如果返回的是https://registry.npm.taobao.org/，那说明你已经更换成功了

第二步：全局安装webpack

安装webpack：

在DOS命令窗口中输入npm install webpack@3.6.0 -g 安装webpack，其中的-g代表webpack的全局安装方式，那么我们可以在电脑上任意一个终端上面执行webpack指令，安装可能稍微有点慢，估计要3~5分钟，稍等一下，别去关闭窗口，之后出现让你可以输入的命令行说明你就安装完成了，如下图：

检查安装结果：

在DOS命令窗口输入webpack --version（注意：两个横线），如果你看到3.6.0，说明你已经成功安装了webpack3.6.0

需要注意：

打开webstorm的时候请使用管理员身份打开，否则在使用webstorm的时候会出现：Unable to save settings: Failed to save settings. Please restart WebStorm错误，你可以在webstorm图标上单击右键——》属性——》右下角的高级——》选择用管理员身份运行——》确定——》应用——》继续——》确定就完成了默认以管理员身份运行webstrom的操作了

第三步：局部安装webpack

上面是全局安装webpack，你可能会想既然已经全局安装了webpack，那为什么还要局部安装呢，这是因为我们需要的项目可能是从网上下载下来的，项目中使用的webpack和我们本地的webpack可能版本不同，这就需要在局部安装webpack了，不过在此之前需要先生成package.json文件，这需要使用npm init命令，当然在此之前你肯定已经做好了全部的准备，我这里用到的工具是webstrom，在webstrom中的Terminal终端中输入npm install webpack@3.6.0 --save-dev就可以了，其中--save-dev的作用就是在开发时依赖，在项目打包后不会在继续使用的