详解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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript import css实例代码
Jul 18 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vant时间控件使用方法详解
Dec 24 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
短波的认识
2021/03/01 无线电
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python 正则表达式的高级用法
2016/12/04 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
如何用Python绘制3D柱形图
2020/09/16 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
超级礼物观后感
2015/06/15 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书