详解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 相关文章推荐
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
js面向对象方式实现拖拽效果
Mar 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
Phpbean路由转发的php代码
2008/01/10 PHP
逐步提升php框架的性能
2008/01/10 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
Js apply方法详解
2017/02/16 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python实现微信远程控制电脑
2018/02/22 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python实现比较文件内容异同
2018/06/22 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
通信研究生自荐信
2014/02/01 职场文书