详解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 08 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
深入理解vue路由的使用
Mar 24 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
Express结合Webpack的全栈自动刷新
May 23 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
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Vue数据监听方法watch的使用
2018/03/28 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
用JS实现选项卡
2020/03/23 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
微信小程序实现打卡签到页面
2020/09/21 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
基于数据归一化以及Python实现方式
2018/07/11 Python
使用tensorflow实现线性回归
2018/09/08 Python
python制作抖音代码舞
2019/04/07 Python
python实现飞机大战小游戏
2019/11/08 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
给女儿的表扬信
2014/01/18 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
青年文明号复核材料
2014/02/11 职场文书
企业宣传标语
2014/06/09 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
党员转正介绍人意见
2015/06/03 职场文书