现在我们如果修改代码,需要重新打包,再一次在命令行下输入webpack命令,很麻烦。

热刷新是什么呢?就是我们该完代码保存之后webpack会自动打包引起浏览器自动刷新,你只需要把精力都专注在代码研发上不需要再分散精力在打包上。节省了时间和精力,效率更高了。

怎么做呢?

首先安装

cpm intall webpack-dev-server --save-dev

 

打开package.json文件。

webpack教程(三)——热刷新

打开命令行,运行npm run start 

打开浏览器 转到http://localhost:8080

当我们修改代码保存的时候,浏览器会直接刷新

webpack教程(三)——热刷新

如果我们的8080端口被占用,想在其他端口打开怎么办?

在webpack.config.js中添加如下代码

webpack教程(三)——热刷新

打开浏览器,端口号改为9000

webpack教程(三)——热刷新

 

已经成功的在9000端口上运行。

更多关于dev-server的细节去https://webpack.js.org/configuration/dev-server查看。

webpack教程(三)——热刷新 

相关文章:

  • 2021-05-06
  • 2022-12-23
  • 2021-10-17
  • 2021-08-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-02-10
  • 2021-09-11
  • 2022-12-23
  • 2021-05-29
  • 2022-02-04
  • 2022-12-23
相关资源
相似解决方案