webpack5 学习 5 -- 文件监听与热更新

文件监听

文件监听是在发现源码发生变化时， 自动重新构建出新的输入文件。这样会使得开发更加的高效，简便。

原理：

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

• 当某个文件发生了变化，并不会立即告诉监听者，而是先缓存起来，等待一段时间后，再执行构建

缺点：

就是无法自动刷新浏览器，需要开发人员自己手动刷新。

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

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

配置

module.export = {
    watch: true,
    watchOptions: {
        // 默认为空，配置不监听的文件或者文件夹，支持正则匹配
        ignored: /node_modules/, // 可以提高性能
        // 监听到的变化发生后会等300ms再去执行，默认 300ms
        aggregateTimeout: 300,
        // 判断文件是否发生变化时通过不停的询问系统指定文件有没有变化实现的，默认每秒询问 1000 次
        poll: 1000
    }
}

热更新 webpack-dev-server（WDS)

跟监听对比

• WDS 不输出文件，而是放在内存中，watch 的方式, 时放在磁盘里面，会对磁盘进行IO
• 无需手动刷新浏览器

一般会配合 HotModuleReplacementPlugin 插件一起使用

安装对应依赖包

npm i webpack-dev-server -D

配置

// 在 package.json 中的 scripts 中添加 webpack-dev-server --open
"scripts": {
    "dev": "webpack-dev-server --open" // --open 是为了构建完成后自动开启一个浏览器
}

// 在 webpack.config.js 中
plugins: [
         // 说明一下， 启动WDS服务的时候， 需要指定一个 html 文件，这里我们用 HtmlWebpackPlugin 这个插件根据模板生成一个 html 文件
          new HtmlWebpackPlugin({
            template: './index.html'
          }),
          // 这个插件配合 WDS 一起使用
          new webpack.HotModuleReplacementPlugin()
       ],
devServer: {
        hot: true, // 开启热更新
        port: 9000, // 指定端口号 默认 8080
    },       
       

==这里特别说明一下==

在多入口的情况下， 热更新可能会失败，这个时候我们需要配置 optimization

optimization: {
        runtimeChunk: 'single'
    },

使用 webpack-dev-middleware 进行热更新

WDM 将 webpack 输出的文件传输给服务器，适用于灵活的定制场景中

这里需要配合 webpack-hot-middleware HotModuleReplacementPlugin 一同工作

配置

// 在 package.json 中的 scripts 中
"scripts": {
    "dev": "node server.js"
}
// 单独的一个 server.js 文件
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')

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

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath || '/'
}))

app.use(webpackHotMiddleware(compiler, {
    log: false,
    heartbeat: 2000
}))

app.listen(9000, function() {
    console.log('start app listening on port 9000!\n')
})
// webpack.config.js 中
entry: {
        index: ['webpack-hot-middleware/client?noInfo=true&reload=true',path.resolve(__dirname, './src/index.js')]
    },
plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        // 这个不能少
        new webpack.HotModuleReplacementPlugin()
    ],