分析:项目中是本地安装的webpack-dev-server ,所以无法把它当做脚本命令,在powersell终端中直接运行(只有那些安装到全局的命令 -g,才能在终端中正常运行)
解决:package.json中配置命令
终端中运行命令:
然后修改代码保存后就直接更新打包了,成功后会生成下面配置路径
注意:webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘中,而是直接托管到电脑的内存中,所以,我们在项目目录中看不到它,但是可以认为和dist,src,node_modules平级有一个看不见的文件bundle.js(避免对此修改保存文件,实时更新打包消耗磁盘)
这个时候项目中引用的bundle.js和打包中引用的bundle.js不是一个文件了,所以这个时候
项目中引用bundle需要改成:
访问文件需要:
另外需要注意的几个问题:
1:node_modules包有问题
解决方法:删除node_modules包,重新安装
2:所有包装完后,webpack-dev-server想正常运行,全局安装过了也不行,在本地项目中必须安装webpack
解决方法:项目本地重新安装webpack包
七:webpack-dev-server常用命令参数
1:修改后自动打开浏览器
2:修改后自动打开浏览器并设置访问端口号为3000
3:修改后自动打开浏览器并设置访问端口号为3000,并设置打开文件路径是:8080/src/
4:修改后自动打开浏览器并设置访问端口号为3000,并设置打开文件路径是:8080/src/,而且浏览器页面无刷新更新
注意:以上四个参数可以在webpack.config.js中配置,供了解
错误记录:配置对象不存在,本例原因是devServer单词错误,S应该大写
注意:webpack.config.js配置后浏览器会报错,禁用热模块替换
解决方法:
1:检查devServer配置hot是否开启