Webpack5中的文件监听与热更新

Posted 2022-02-27 IT人.阿标

文章目录

• • Webpack5中的文件监听
  • • 启动 webpack 命令时，带上--watch参数
    • 再配置文件webpack.config.js中设置watch：true
  • 文件监听的与原理
  • 热更新
  • • 安装webpack-dev-server
    • 配置package.json
    • 将webpack.config.js中node改为development
    • 引入webpack自带插件'webpack.HotModuleReplacementPlugin'插件
    • 配置devServer

Webpack5中的文件监听

Webpack文件监听是指在开发过程中，发生了源码变化，自动重新构建出新的输出文件。

文件监听的两种方式

webpack开启文件监听的方式有两种：

• 启动 webpack 命令时，带上–watch参数

  "scripts": 
      "test": "echo \\"Error: no test specified\\" && exit 1",
      "build": "webpack",
      "watch": "webpack --watch"   //添加--watch以后，需要通过npm run watch命令来执行监听
   
  

  注意不能直接再命令行后面加，如：npm run build --watch，这样是无效的，需要在package.json的script命令后面带上–watch，如上面脚本。然后再执行：npm run watch即可。

  它的缺陷就说每次都需要手动的刷新浏览器。

• 再配置文件webpack.config.js中设置watch：true

缺陷，没戏需要手动刷新浏览器

文件监听的与原理

原理：轮询文件最后的编辑修改时间是否发生变化，轮询时间和等待时间都可以通过webpack.config.js中的watchOptions进行配置，如：

module.exports = 
	// 默认为 false， 也就是不开启
	watch: true,
	// 只有开启监听模式的时候，watchOptions 才有意义
	watchOptions: 
		// 默认为空，不监听的文件或文件夹，支持正则匹配如：ignored: "files/**/*.js"
    // 如果是多个，可以使用数组：ignored: ['files/**/*.js', 'node_modules']
		ignored: /node_modules/,
		// 监听到变化后会等 300ms 再去执行，默认 300ms
		aggregateTimeout: 300,
		// 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问 1000 次
		poll: 1000
	

上面说道无论是命令行后面加上--watch还是webpack.config.js加上watch:true两种方式在修改完成文件以后，都需要手动的刷新浏览器，在webpack中，存在不用刷新浏览器就能监听文件更新并刷新的，那就是热更新，下面我们一起来看看

热更新

webpack-dev-server的出现，就是为了解决上面存在的问题，原文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即上面配置的output路径。

我们再启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

接下来我们一起看看webpack-dev-server是如何使用的。

安装webpack-dev-server

npm i webpack-dev-server -D

配置package.json

"scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch --progress",
    "dev": "webpack-dev-server --open"   //--open的意思就说每次构建完成以后自动开启浏览器
 

将webpack.config.js中node改为development

module.exports = 
  ......
  mode: 'development',                      //环境
  .....

引入webpack自带插件’webpack.HotModuleReplacementPlugin’插件

const webpack = require('webpack');
......
plugins: [
        new webpack.HotModuleReplacementPlugin(
            // Options...
        )
    ],

配置devServer

devServer: 
        static: 
            directory: path.join(__dirname, '/'),
        ,
        port: 9888,
    

完成上述配置步骤，执行npm run dev，打开浏览器访问首页

再次更新文件，不需要刷新浏览器，当发下源文件更新时候会自动更新浏览器内容。