webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题

webpack-dev-server工具能实现自动打包编译和热更新

首先将webpack-dev-server安装到项目中

npm install webpack-dev-server -D

这时在命令行窗口中敲 webpack-dev-server 会发现

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

这是因为该工具只是安装到本地项目中了

纳尼? 难道要全局安装一下吗???

不必!!!这时只需在根目录的package.json中"scripts"下中添加

"dev": "webpack-dev-server"

 

固然此处能够带一些参数配置:  --open　　　　　　启动时打开浏览器

　　　　　　　　　　　　　　--port　　　　　　设置端口号

　　　　　　　　　　　　　　--contentBase　　设置根目录(即 设置 http://localhost:8080 打开时显示哪一个界面)

　　　　　　　　　　　　　　--hot　　　　　　热更新

"dev": "webpack-dev-server --open --port 8080 --contentBase src --hot"

 

 

便可使用 npm run dev 来运行项目了

可是笔者在运行项目时 报了如下错误:

该问题的出现是因为webpack没有安装到项目中致使的;只须要将之安装到项目中便可:

npm install webpack -D

可是 运行依然出错:

此问题的出现 经过查阅得知 应该是 webpack 与 webpack-cli版本不一致致使的

因而:

npm uninstall webpack -D
npm install webpack webpack-cli -D　

而后 npm run dev 运行成功  而后就能够http://localhost:8080访问了

若是没有安装成功可能出现的状况是缓存没有清

npm cache clean --force