详解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正确获取元素样式详解
Aug 07 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php对数组排序代码分享
2014/02/24 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
高中生自我评价个人范文
2013/11/09 职场文书
出纳岗位职责
2013/11/09 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
村级个人对照检查材料
2014/08/22 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
村官个人总结范文
2015/03/03 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL