webpack的文件监听实现（热更新）

本文主要是介绍webpack的文件监听实现（热更新），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意：安装之前，先保证webpack项目能正常运行！

前言
1 第一种方式， --watch
- 1.1 配置package.json
- 1.2 到控制台输入 npm run watch
- 1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。
- 1.4 文件监听的原理理分析
2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-dev-server）
- 2.1 配置package.json
- 2.2 配置webpack.config.js
- 2.3 到控制台运行 npm run dev，即可运行！

前言

⽂件监听是在源码发⽣变化时，⾃动重新构建出新的输出文件。
webpack 开启监听模式，有两种方式：

启动 webpack 命令时，带上 --watch 参数。
唯一缺点：需要手动刷新才能看到变化；
在配置 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再去执行，默认300msaggregateTimeout: 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}
}