详解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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
浅谈Jquery核心函数
2015/06/18 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python3遍历目录树实现方法
2015/05/22 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
vue使用element-ui按需引入
2022/05/20 Vue.js