详解webpack的文件监听实现(热更新)


Posted in Javascript onSeptember 11, 2020

前言

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

1.启动 webpack 命令时,带上 --watch 参数。
 唯一缺点:需要手动刷新才能看到变化;

2.在配置 webpack.config.js 中设置 watch: true。
 优点:
(1) WDS 不刷新浏览器
(2) WDS 不输出文件,⽽是放在内存中
(3) 使⽤用 HotModuleReplacementPlugin 插件

1 第一种方式, --watch

1.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch": "webpack --watch" // 新增配置
 }
 // ...
}

1.2 到控制台输入 npm run watch

详解webpack的文件监听实现(热更新)

1.3 修改文件,保存后,会自动打包,到浏览器刷新,才能看到变化。

1.4 文件监听的原理理分析

轮询判断文件的最后编辑时间是否变化

某个⽂件发⽣生了了变化,并不会⽴刻告诉监听者,⽽是先缓存起来,等 aggregateTimeout

module.export = {
 //默认 false,也就是不不开启
 watch: true,
 //只有开启监听模式时,watchOptions才有意义
 wathcOptions: {
 //默认为空,不监听的文件或者文件夹,支持正则匹配
 ignored: /node_modules/,
 //监听到变化发生后会等300ms再去执行,默认300ms
 aggregateTimeout: 300,
 //判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的,默认每秒问1000次
 poll: 1000
 }
}

2 第二种方式,在配置 webpack.config.js 中设置 watch: true(热更新:webpack-dev-server)

2.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open" // 新增配置,运行 npm run dev 会自动打开浏览器
 }
 // ...
}

2.2 配置webpack.config.js

'use strict'
 
const path = require('path');
var webpack = require('webpack'); // 引进 webpack
module.exports = {
 // ...
 mode:'development', // production 改为开发环境,因为只有开发环境才用到热更新
 module:{
 // ...
 },
  plugins:[
   new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
   contentBase:'./dist',
   hot: true
  }
}

2.3 到控制台运行 npm run dev,即可运行!

到此这篇关于详解webpack的文件监听实现(热更新)的文章就介绍到这了,更多相关webpack 文件监听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
js数组的操作详解
Mar 27 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
js代码编写无缝轮播图
Sep 13 #Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 #Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 #Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 #Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 #Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
js实现图片实时时钟
2020/01/15 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python 导入数据及作图的实现
2019/12/03 Python
Python文件操作方法详解
2020/02/09 Python
python新手学习使用库
2020/06/11 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2015年读书月活动总结
2015/03/26 职场文书
毕业感言怎么写
2015/07/31 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang