webpack安装

注：以下安装操作需在网络连接下进行

---

1. 安装node.js

//检查npm版本
npm -v

2.新建项目（文件夹）

注：文件夹名不能是webpack

3.在此文件夹下输入命令 npm init -y 建立配置文件，文件名为package.json

//输入上述命令后，package.json 将会自动生成，内容如下：
{
  "name": "webpacktext",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.安装webpack

通过cmd到项目的根目录下，输入

npm install webpack --save-dev

此时打开package.json文件，文件末尾出现版本信息

{
  "name": "webpacktext",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1"
  }
}

在项目根目录下，生成了 node_modules 文件。 

 

5.安装webpack-cli

webpack安装完成后，输入命令 webpack -v 检查版本，提示不是内部命令。

是因为webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

//输入下面命令
npm install --save-dev  webpack-cli
//回车后
webpack -v
//若仍然显示不是内部命令,表示安装没有成功，则继续
npm install --global webpack
npm install --global webpack-cli
//回车后
webpack -v

一般进行完上面操作后，就可以了。

但我在进行完上述操作后，“不是内部命令”这个问题并没有解决。后查找后了解需要添加修改环境变量。

在系统环境变量中：添加NODE_PATH，并修改Path

其中路径为webpack.cmd文件所在路径，一般在D盘下（在这里推荐一个搜索工具：Everything）

 

 

完成后，在cmd中输入 webpack -v  即可查看。