webpack-dev-server怎么验证是不是安装

Posted 2023-05-16

参考技术A

配置webpack-dev-server：

a. webpack-dev-server简介：

是一个小型node.js express服务器

新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器

启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

两种自动刷新方式：

iframe mode
在网页中嵌入了一个 iframe ，将我们自己的应用注入到这个 iframe 当中去，因此每     次你修改的文件后，都是这个 iframe 进行了 reload
命令行：webpack-dev-server，无需--inline
浏览器访问：http://localhost:8080/webpack-dev-server/index.html

inline mode
命令行：webpack-dev-server --inline
浏览器访问：http://localhost:8080

b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev

可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

c. 在webpack.config.js中添加配置

var webpack=require('webpack');
module.exports =
……
devServer:
historyApiFallback: true,
inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
,
plugins:[
……
new webpack.HotModuleReplacementPlugin()
]
……
;

d. 在package.json里配置运行的命令（npm支持自定义一些命令）

"scripts":

"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新
,

e. 运行server

npm start

Error: .........（此处省略一堆错误）

解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件     夹，内含webpack及其依赖包）
npm install webpack

浏览器打开http://localhost:8080/
成功运行，且修改app中的js代码，浏览器会自动刷新！成功！

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序

今天新初始的项目遇到这个问题，记录如下：

1. 这个错误与全局安装webpack-dev-server无关，不必进行全局安装

2. 原因可能是：

　 npm或yarn安装包(当前项目)，安装中报错，例如node-sass安装时报错，导致后续包没有安装，包括webpack，webpack-dev-server等

    或者

     压根就没有安装webpack-dev-server(当前项目安装)

解决办法：

    将报错的包单独安装一遍，例如node-sass，npm i node-sass -D（node-saas不要用yarn安装，容易安装失败）

    然后，再次执行一次npm install 或 yarn installl，将剩余的包安装全