安装webpack与webpack-dev-sever时的采坑经历

1 执行npm install webpack-dev server --sav e -dev命令时报错：

解决：检查webpack-dev-sever的配置文件：package.json的文件中"scripts":{
}中添加"dev": “webpack-dev-server --open --config webpack.config.js”；检查配置文件中的webpack-dev-server和命令行的“sever”书写不一致，改好后即可；
2 npm run dev时报错：

解决：命令行执行 npm i -D webpack-cli，然后继续执行npm run dev 即可。

安装webpack与webpack-dev-sever步骤总结：

1 打开项目文件目录，地址栏cmd切换到系统控制台；或者直接cmd，cd 项目文件目录。
2 命令行执行：npm init
成功结果如下图：

3 清除所有npm缓存：npm cache clear --force
执行结果如下图：

4 在项目文件package.json的配置文件中配置：“dev”: “webpack-dev-server --open --config webpack.config.js”。

5 项目目录新建main.js文件,然后做以下配置：

6 项目目录新建index.html文件，并引入上述新建的main.js的文件。

7 命令行执行：npm install webpack --save-dev
成功结果如下图：

8 命令行继续执行：npm install webpack-dev-server --save-dev
成功结果如下图：

9 命令行继续执行：npm run dev

执行后默认浏览器开启窗口会打开127.0.0.1:8080端口