详解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中遭遇级联表达式陷阱
Mar 08 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
js同源策略详解
May 21 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
详解vue添加删除元素的方法
Jun 30 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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实现rc4加密算法代码
2012/04/25 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
python实现简易学生信息管理系统
2020/04/05 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
怎么写好自荐信
2013/10/30 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
优乐美广告词
2014/03/14 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
安全施工责任书
2014/08/25 职场文书
趣味运动会开幕词
2015/01/28 职场文书
军训新闻稿范文
2015/07/17 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
用Python实现Newton插值法
2021/04/17 Python