详解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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
详解JS函数重载
Dec 04 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 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
我的论坛源代码(八)
2006/10/09 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
谷歌地图打不开的解决办法
2014/08/07 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
python+django加载静态网页模板解析
2017/12/12 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
个人简历自荐信
2013/12/05 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
采购助理岗位职责
2014/02/16 职场文书
求职简历自荐信
2014/06/18 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
无房证明样本
2015/06/17 职场文书
公司晚宴祝酒词
2015/08/11 职场文书