webpack安装填坑（'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件）

差不多每次安装软件都是一个波折的过程，这次webpack的安装也不例外，安装成功之后立马来记录解决错误的方法，以备不时之需

前提条件

webpack是依赖于node安装的，所以在安装前要确保自己是否安装了node.js，在命令行运行node -v如果情况如下就是安装了node.js，如果没有安装请参考node.js的安装步骤

注意：记得在安装的node目录下创建两个文件夹然后，配置npm路径

1. 配置全局路径：npm config set prefix “d: odejs ode_global”
2. 配置缓存路径：npm config set cache “d: odejs ode_cache”

webpack安装步骤

我之前在网上找了许多安装步骤，发现按着步骤来都会报错，最终运行会出现“'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件”，最后我总结了两个最主要的原因：

1. 环境变量的配置
2. cli的安装（如果webpack4+版本都需要安装cli，因为webpack 4将 cli 分离出来了）

本地安装

1. 安装webpacknpm install webpack --save-dev
2. 安装clinpm install webpack-cli --save-dev
   本地安装可以使我们在引入破坏式变更的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules目录中查找安装的 webpack;当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

全局安装

1. 安装webpacknpm install webpack -g
2. 安装clinpm install webpack-cli -g
   全局安装会将项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败

环境配置

我以为安装完就可以了，没想到运行的时候出现“webpack'不是内部或外部命令，也不是可运行的程序或批处理文件”错误，这时我们要想到配置环境变量

鼠标右击我的电脑，选择属性，选择高级系统设置，点击环境变量

• 在用户变量中的path变量下添加刚刚创建的global文件路径，例如：

• 然后在系统变量中也在path变量下添加刚刚创建的global文件路径，例如：

检查webpack是否安装成功

出现版本号，安装成功