文件监听

文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。


在webpack中开启监听模式，有两种方式：

  • 启动webpack命令时，带上 --watch 参数
  • 在配置 webpack.config.js中设置 watch: true

唯一缺陷：每次需要手动刷新浏览器


文件监听原理分析

轮询判断文件的最后编辑时间是否变化


某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等 aggregateTimeout

module.export = {
	//默认为flase，也就是不开启
	watch: true,
	//只有开启监听模式，watchOptions才有意义
	watchOptions: {
		//默认为空，不监听的文件或者文件夹，支持正则匹配
		ignored: /node_modules/,
		//监听到变化发生后会等300ms再去执行，默认300ms
		aggregateTimeout: 300,
		//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次
		poll:1000
	}
}

更好的方法 热更新(wds)：webpack-dev-server

  • 方法1.

wds 通常与 HotModuleReplacementPlugin插件一起使用，wds的一个比较大的优势是，它没有磁盘的io,输出完之后放到内存中，而不是输出为文件，所以构建速度会有一个较大的优势。


如果报错为 ： 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。请先安装依赖：yarn add webpack-dev-server -D


  • 方法2.

WDM 将 webpack 输出的文件传输给服务器,使用于灵活的定制场景。


const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler,{
	publicPath: config.output.publicPath
}));

app.listen(3000,function(){
	console.log('Example app listening on post 3000\n')
})

在这种情况下，对webpack的配置控制会更加灵活


webpack 热更新原理

  • Webpack Compile: 将JS编译成Bundle
  • HMR Server： 将热更新的文件输出给HMR Runtime
  • Bundle server: 提供文件在浏览器的访问
  • HMR Runtime: 会被注入到浏览器，更新文件的变化
  • bundle.js 构建输出的文件