最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
webpack文件监听如何实现 webpack文件监听实现代码
时间:2020-09-11 编辑:袖梨 来源:一聚教程网
webpack文件监听如何实现?本篇文章小编给大家分享一下webpack文件监听实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
文件监听是在源码发生变化时,自动重新构建出新的输出文件。
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
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,即可运行!
-
上一个: jni中的java接口使用方法代码解析
-
下一个: js编写无缝轮播图代码示例
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12