美文网首页
webpack文件监听

webpack文件监听

作者: 小蜗牛的碎碎步 | 来源:发表于2019-11-19 12:42 被阅读0次
概念

文件监听是在发现源码发生变化时,自动重新构建出新的输出文件。

方式
  1. 启动webpack命令时,带上--watch参数
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch":"webpack --watch"
  }
  1. 在配置webpack.config.js中设置watch:true
原理

轮询判断文件的最后编辑时间是否发生变化
某个文件发生变化,并不会立即告诉监听者,而是先缓存起来,等aggregateTimeout

module.exports = {
  watch:true,//默认为false
  watchOptions:{
    //不监听的文件或文件夹,支持正则匹配,默认为空
    ignored:/node_modules/,
    //监听变化发生后会等300ms再去执行,默认为300ms
    aggregateTimeout:300,
    //判断文件是否发生变化是通过不停询问系统指定文件有没有发生变化实现的,默认每秒问1000次
    poll:1000
  }
}
缺点

浏览器不会自动刷新,需要手动刷新。

相关文章

  • webpack之文件监听及热更新

    webpack 的文件监听 文件监听是在源码发生变化时,自动重新构建出新的输出文件。webpack开启监听模式,有...

  • webpack文件监听

    概念 文件监听是在发现源码发生变化时,自动重新构建出新的输出文件。 方式 启动webpack命令时,带上--wat...

  • 4.5 使用自动刷新

    4.5 使用自动刷新问题一:如何配置实现文件监听? Webpack 支持文件监听相关的配置项如下: module....

  • 4. webpack4.0 热跟新`webpack-dev-se

    devserver 简介 --webpack-dev-server解决的问题 -提供http服务-监听文件变化、实...

  • webpack 开发体验问题

    自动编译 watch模式,监听文件变化,自动编译打包。命令行方式通过--watch yarn webpack --...

  • webpack使用

    webpack是一个打包项目构建工具gulp 基于任务,而webpack 基于模块化处理的(监听文件的变化来重新编...

  • 热更新原理

    文件监听-自带方式 1 .源码发生变化时,自动构建出新的输出文件2 .开启方式 3 .原理 webpack-dev...

  • 搭建webpack构建环境(3)-浏览器自动刷新

    如果简单的解决浏览器在修改文件后刷新,可以使用webpack --watch 启动监听文件,还有一种方式就是使用w...

  • [webpack 学习系列 ] 4. koa2 + webpac

    前言 webpack 提供了三种搭建开发环境的方式: webpack 监听模式 webpack-dev-serve...

  • webpack性能优化--自动刷新和热更新

    自动刷新 自动刷新是指webpack的devServer在监听到文件有变化后,会触发重新构建打包,然后自动刷新页面...

网友评论

      本文标题:webpack文件监听

      本文链接:https://www.haomeiwen.com/subject/sfywictx.html