深入理解webpack自动刷新浏览器

文章目录

  • 1. 自动刷新浏览器
    • 1.1 监听文件变化
      • 1.1.1 方式
      • 1.1.2 原理
    • 1.2 自动刷新浏览器
      • 1.2.1 原理
  • 2. 模块热更新
    • 2.1 两种方式
      • 2.1.1 webpack-dev-server
      • 2.1.2 webpack-hot-middleware

我们在日常开发时,有一个需要在开发状态下的优化,就是 浏览器能自动显示修改后的代码,而无需我们手动刷新

1. 自动刷新浏览器

为了能实现浏览器自动刷新,需要做两件事情:

  • 监听文件变化
  • 自动刷新浏览器

1.1 监听文件变化

监听文件变化是在webpack模块进行。

1.1.1 方式

需要在webpack中开启监听模式,有两种方式(开启监听模式后,可以设置监听相关配置watchOptions):

1. 在webpack配置文件中添加watch:true

module.export = {
   
  watch: true,
  watchOptions: {
   
    

你可能感兴趣的:(webpack,webpack,模块热更新,自动刷新浏览器,dev-server,dev-middleware)