webpack安装配置教程

1.安装node.js
去node.js官网(https://nodejs.org/en/)下载LTS稳定版本，一路傻瓜式安装（具体步骤另行查阅，此处不详述）。安装完成后在cmd界面输入node -v，如果能出现版本号，代表安装成功。

2.配置
找到安装node.js的地址，里面会有node_cache和node_global两个文件。如果没有的话，创建这两个文件夹，然后在cmd中执行npm config set cache “D:\nodejs\node_cache”（此处替换成你本机中node_cache文件夹的地址），再执行npm config set prefix “D:\nodejs\node_global”（此处替换成你本机中node_global文件夹的地址）。


3.安装Webpack
此处采用全局安装的方式，在cmd中输入npm install webpack -g，安装最新的Webpack版本。
4.配置环境变量
搜索环境变量，得到如图的结果



在用户变量中添加node_global的路径，我的是“C:\Program Files\nodejs\node_global”。
再在系统变量中新建一个NODE_PATH 并添加node_global的路径。
5.安装Webpack-cli
在webpack3中，webpack与webpack-cli是绑定的。也就是你使用"npm i webpack -g"安装了webpack以后，webpack-cli是默认就安装上了。
　　但是到了webpack4，这2个东西已经被分解成了2个完全独立的包，所以，你还需要独立安装webpack-cli。
在cmd中执行npm i webpack-cli -g进行全局安装， 输入webpack -v，出现版本号代表安装成功。


打开VSCode，输入webpack -v，也能成功显示版本号，此时可以在VSCode中使用webpack了