解决webpack中 使用webpack-dev-server不能自动刷新的问题

在自己搭建的项目中,使用webpack命令可以打包,随后使用webpack-dev-server启动服务,可以查看更改;

在package.json中我是如下配置:

但是我配置了热更新插件却不生效,更改代码后,控制台的确编译完成,但是浏览器并没有刷新,而且手动刷新之前修改的代码并没有生效;

查找很多资料发现:

1.webpack命令是打包命令,会生成在webpack.config.js里面配置的output属性 指向路径的文件

2.webpack-dev-server打包的生产的文件并不会添加在项目目录中,webpack-dev-server并不能读取webpack.config.js里面配置的output属性,默认打包的文件名是bundle.js,不会出现在项目目录中

由于当时我指定的打包后的文件在public/bundle.js,所以在index.html中引入js路径就是public/bundle.js,所以导致使用webpack-dev-server命令时,找不到bundle.js

所以在package.json中修改成以下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --inline",
    "build": "webpack"
  },

在index.html中修改成以下

<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值