01. ⽂件监听使⽤(watch)

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

某个⽂件发⽣了变化，并不会⽴刻告诉监听者，⽽是先缓存起来，等 aggregateTimeout

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

02. 热更新

• webpack-dev-server

WDS 不刷新浏览器

WDS 不输出⽂件，⽽是放在内存中

使⽤ HotModuleReplacementPlugin插件

"name": "hello-webpack",
"version": "1.0.0",
"description": "Hello webpack",
"main": "index.js",
"scripts": {
"build": "webpack ",
+ ”dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC"
}

• webpack-dev-middleware

WDM 将 webpack 输出的⽂件传输给服务器 适⽤于灵活的定制场景

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-devmiddleware');
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 port 3000!\n');
});

webpack-dev-server只负责启动服务和前置准备工作，所有文件相关的操作都抽离到webpack-dev-middleware库了，主要是本地文件的编译和输出以及监听.

03. 热更新的原理分析

• Webpack Compile: 将 JS 编译成 Bundle
• HMR Server: 将热更新的⽂件输出给 HMR Rumtime
• Bundle server: 提供⽂件在浏览器的访问。正常一般访问文件是以文件目录的形式访问，Bundle server是以服务器的形式访问， 比如：localhost:8080/bundle.js 形式访问。
• HMR Rumtime: 会被注⼊到浏览器的bundle.js 文件中，浏览器上的bundle.js 与服务器建立链接，通常这个链接是一个websocket，，更新⽂件的变化
• bundle.js: 构建输出的⽂件

热更新的过程