详解webpack的文件监听实现(热更新)

前言

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

1.启动 webpack 命令时，带上 --watch 参数。
 唯一缺点：需要手动刷新才能看到变化；

2.在配置 webpack.config.js 中设置 watch: true。
 优点：
(1) WDS 不刷新浏览器
(2) WDS 不输出文件，⽽是放在内存中
(3) 使⽤用 HotModuleReplacementPlugin 插件

1 第一种方式， --watch

1.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch": "webpack --watch" // 新增配置
 }
 // ...
}

1.2 到控制台输入 npm run watch

1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。

1.4 文件监听的原理理分析

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

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

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

2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-dev-server）

2.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open" // 新增配置，运行 npm run dev 会自动打开浏览器
 }
 // ...
}

2.2 配置webpack.config.js

'use strict'

const path = require('path');
var webpack = require('webpack'); // 引进 webpack
module.exports = {
 // ...
 mode:'development', // production 改为开发环境，因为只有开发环境才用到热更新
 module:{
 // ...
 },
  plugins:[
   new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
   contentBase:'./dist',
   hot: true
  }
}

2.3 到控制台运行 npm run dev，即可运行！

到此这篇关于详解webpack的文件监听实现(热更新)的文章就介绍到这了,更多相关webpack 文件监听内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webpack自动打包和热更新的实现方法

    webpack常用配置 webpack dev server 功能:自动打包文件 配置dev server:在webpack.config.client.js中配置 const path = require('path'); const HTMlPlugin = require('html-webpack-plugin'); // 判断是否是开发环境 const isDev = process.env.NODE_ENV === 'development' const config = { ent

  • webpack热模块替换（HMR）/热更新的方法

    这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新. 模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换.增加.删除必要的模块. HMR 对于那些由单一状态树构成的应用非常有用.因为这些应用的组件是 "dumb" (相对于 "smart") 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态. webpack-dev-server内置"live reload",会自动刷新页面.

  • webpack实现热更新（实施同步刷新）

    webpack实现热更新（实施同步刷新）

    本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助. 解决方案一: 实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单. 1.webpack命令安装 npm install webpack -g npm init npm init -yes //可以创建默认的package.json npm install webpack --save-dev npm install path fs html-webpack-plugi

  • 详解webpack 热更新优化

    前言 随着项目的界面越来越多,webpack的热更新越来越慢,有时会达到5,7s之久,这对于开发效率影响是非常巨大的. 分析过程 于是今天就针对这个分析了一下热更新慢的原因,步骤如下 首先先在package中的启动命令加上 --progress --watch --colors --profile 先解释一下这几个参数的含义 --progress 构建进度 --watch 实时监测 --profile 编译过程中的步骤耗时时间 加上了这几个参数,重启项目,就可以开始观察耗时时间了,修改了某个文件

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • 详解nginx同一端口监听多个域名和同时监听http与https

    详解nginx同一端口监听多个域名和同时监听http与https 1.同一端口监听多个域名 如今公网ip资源越来越珍贵,多域名监听应用非常广泛,就是用一个端口,比如80或者443,监听多个入口域名.如下: server { listen 443 ssl; server_name xxx.xxx.cn; ssl_certificate ssl/server.pem; ssl_certificate_key ssl/server.key; ...... } 在启用新的域名的时候,只需要另启一个ser

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 实例详解vue.js浅度监听和深度监听及watch用法

    第一个浅度监听: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id=&quo

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • npm script 的文件监听和自动刷新的命令详解

    文件监听的作用是为了实现自动化,释放双手和精力,提高效率,让开发者更加关注于开发.npm script 文件监听和 grunt.gulp 功能类似. 自动刷新,意思就是改动文件保存后,页面自动刷新,减少日常开发的操作. 代码检查的监听和自动化 代码检查工具 stylelint.eslint.jsonlint 这些对 watch 支持很弱,所以就需要引入工具包 onchange 安装命令依赖包 npm i onchange -D // 或 yarn add onchange -D 编写命令 "sc

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 详解webpack的clean-webpack-plugin插件报错

    1.出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__dirname, 'dist'),

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解ftp创建文件权限问题

    详解ftp创建文件权限问题

    详解ftp创建文件权限问题 一.问题 有一个这样的需求,admin为一个Linux为其FTP应用创建的一个有权限限制的用户,通过admin用户可以进行登录FTP服务,登录FTP服务后,创建文件夹,该文件夹的用户和用户组都是admin,属性为755,即只有admin用户才有写的权限,但是,FTP后台是通过b用户登录linux系统执行程序上传文件到FTP服务器,由于FTP服务器的文件夹都是由admin用户创建的,且属性为755,b用户根本没有写的权限,导致程序上传文件失败. 二.分析 那么解决问题的

随机推荐