文件监听

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

• webpack开启监听模式，有两种方式

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

    文件监听的原理

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

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

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

  热更新（HMR）

• webpack-dev-server（WDS）

  • WDS不刷新浏览器
  • WDS不输出文件，而是放在内存中
  • 配合HotModuleReplacementPlugin插件使用
    • 插件是webpack内置的
    • 由于js文件默认不能使用热更新，所以要加这个插件
    • 由于style-loader有热更新的功能，所以hot: true，css文件就热更新了
• 下载包：npm i webpack-dev-server -D
  • package.json文件中"scripts"加一行，"dev": "webpack-dev-server"
  • 然后npm run dev就方便一些 ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’); const webpack = require(‘webpack’)

module.exports = { // 这样设置之后，html才会有热更新 entry: [‘./src/page/index.js’, ‘./src/page/index.html’], plugins: [ new webpack.HotModuleReplacementPlugin() ], // webpack-dev-server devServer: { static: { // 先npm run build出来dist目录 directory: path.join(__dirname, ‘dist’), }, hot: true, // 开启热更新 open: true, }, // development环境下，才能搞 mode: ‘development’, } ```

热更新原理分析

• Webpack Complier：将JS编译成bundle(打包后的JS)
• HMR Server：将热更新的文件输出给HMR Runtime
• Bundle Server：提供文件在浏览器访问
• HMR Runtime：会被注入到浏览器，更新文件的变化
• bundle.js：编译后输出的文件