webpack学习 (3)

分析:项目中是本地安装的webpack-dev-server ,所以无法把它当做脚本命令,在powersell终端中直接运行(只有那些安装到全局的命令 -g,才能在终端中正常运行)

解决:package.json中配置命令

webpack学习

终端中运行命令:

webpack学习

然后修改代码保存后就直接更新打包了,成功后会生成下面配置路径

webpack学习

注意:webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘中,而是直接托管到电脑的内存中,所以,我们在项目目录中看不到它,但是可以认为和dist,src,node_modules平级有一个看不见的文件bundle.js(避免对此修改保存文件,实时更新打包消耗磁盘)

这个时候项目中引用的bundle.js和打包中引用的bundle.js不是一个文件了,所以这个时候

项目中引用bundle需要改成:

webpack学习

访问文件需要:

webpack学习

另外需要注意的几个问题:

1:node_modules包有问题

webpack学习

解决方法:删除node_modules包,重新安装

 

webpack学习

2:所有包装完后,webpack-dev-server想正常运行,全局安装过了也不行,在本地项目中必须安装webpack

webpack学习

解决方法:项目本地重新安装webpack包

 

webpack学习

七:webpack-dev-server常用命令参数

1:修改后自动打开浏览器

webpack学习

2:修改后自动打开浏览器并设置访问端口号为3000

webpack学习

3:修改后自动打开浏览器并设置访问端口号为3000,并设置打开文件路径是:8080/src/

webpack学习

4:修改后自动打开浏览器并设置访问端口号为3000,并设置打开文件路径是:8080/src/,而且浏览器页面无刷新更新

webpack学习

注意:以上四个参数可以在webpack.config.js中配置,供了解

webpack学习

错误记录:配置对象不存在,本例原因是devServer单词错误,S应该大写

webpack学习

 注意:webpack.config.js配置后浏览器会报错,禁用热模块替换

webpack学习

解决方法:

1:检查devServer配置hot是否开启

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwxjg.html