webpack 之 webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩

最新推荐文章于 2024-05-14 16:27:34 发布

城南花开ze

最新推荐文章于 2024-05-14 16:27:34 发布

阅读量1.1k

点赞数

分类专栏： Webpack、Vite、Gulp 文章标签： webpack 文件监听热更新文件指纹设置代码压缩

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/124061611

版权

本文详细介绍了webpack的高级用法，包括文件监听、热更新和文件指纹设置，以及代码压缩的实现。通过开启--watch参数或设置watch选项实现文件监听，配合webpack-dev-server进行热更新，减少了手动刷新的需要。文件指纹用于跟踪文件变化，通过hash、chunkhash和contenthash确保文件唯一性。此外，文章还展示了如何对JS、CSS和图片进行代码压缩，提升项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩

webpack 中的文件监听，文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。webpack开启监听模式，有两种方式，如下所示：

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

webpack 中的文件监听使用，唯一缺陷是每次需要手动刷新浏览器，代码如下：

"scripts": {
   
  "build": "webpack",
  "watch": "webpack --watch"
}

文件监听的原理分析，轮询判断文件的最后编辑时间是否变化。某个文件发生了变化，并不会告诉立刻告诉监听者，而是先缓存起来，等 aggregateTimeout，代码如下：

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

webpack 中的热更新 webpack-dev-server，WDS 不刷新浏览器，WDS 不输出文件，而是放在内存中，使用 HotModuleReplacementPlugin 插件，代码如下：

"scripts": {
   
  "build": "webpack"，
  "dev": "webpack-dev-server --open"
}

热更新使用 webpack-dev-middleware，WDM 将 webpack 输出的文件传输给服务器，适用于灵活的定制场景，代码如下：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require

最低0.47元/天解锁文章