安装webpack的完整步骤

一、node和webpack安装步骤

1.安装 node.js

（1）在 node.js官网(Download | Node.js)下载LTS稳定版本，一路傻瓜式安装

（2） 傻瓜式下一步 Next 安装即可

（3）安装完成后在cmd界面输入node -v，如果能出现版本号，代表安装成功。

（4）解决 npm -v 出现空白行 没反应的方法

 问题一：输入npm 或 npm -v 后下面出现两空行

 

 问题二：紧接着导致 webpack 安装空两行，无法安装成功！

解决办法： 搜索C盘下的.npmrc，然后删除即可

2.安装 webpack

（不建议安装新版本，建议指定安装3.X版本）

（操作此处命令即可，以下的参考即可）

   npm install webpack@3.4.1 -g

（3.X版本默认一起安装了webpack-cli，所以不用再单独安装了）

在cmd中输入 npm install webpack -g

npm install webpack -g

① 此处 -g 表示全局安装的方式

② 默认安装最新 webpack 版本

3.安装 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，出现版本号代表安装成功。

或者cmd中执行 webpack --version 或 webpack -v 查看版本自动提醒安装 webpack-cli，输入yes 即自动安装成功。

npm i webpack-cli -g 

4.安装 webpack-dev-server

再次检查版本成功！但是提示：webpack-dev-server not installed

继续执行命令：npm install webpack-dev-server 

npm install webpack-dev-server --save-dev

二、webpack命令补充

1.全局安装最新版本命令

npm install webpack -g 

2.全局安装指定版本

npm install webpack@3.6.0 -g 

3.全局安装webapck-cli

npm install webpack-cli -g

4.局部安装webpack

npm install webpack@3.6.0 --save-dev

5.删除全局和局部webpack-cli

npm uninstall -g webpack-cli

npm uninstall webpack-cli

 6.删除全局webpack

npm uninstall -g webpack

7.删除本地webpack

npm un webpack

8.查看webpack版本

webpack -v

三、解决webpack打包错误问题

1.webpack3.X版本打包命令

webpack .\src\main.js .\dist\bundle.js

2.webpack4.X版本打包命令

webpack .\src\main.js -o .\dist\bundle.js