zoukankan      html  css  js  c++  java
  • Webpack中的文件监听 watch配置实时更新

    Webpack中的文件监听

    文件监听是在发现源码变化时,就自动构建生成新的输出文件

    开启文件监听有两种方式

    1. 在启动webpack命令时,加上--watch参数
    2. 在webpack.config.js中,设置watch:true

    1 watch参数 方式

    配置script脚本
    运行npm run watch即可
    缺点是文件更新后会刷新浏览器

    {
      "name": "02beginning",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": " webpack ",
        "watch:": "webpack --watch"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {}
    }
    

    2 webpack配置方式开启watch

    原理是轮询系统文件有无变化再去更新的,默认1秒钟轮询1000次

    发现文件有变化时不会立即执行更新,而是会等待300ms, 300内如果别的文件也有变化会加载到更新列表中一起更新(思想类似于节流)

    在把node_modules里面忽略后会有性能提升

    webpack配置如下

    'use strict';
    
    const path = require('path');
    
    module.exports = {
        // 开启监听
        watch:true,
        watchOptions:{
            // 设置不监听的文件或文件夹,默认为空
            ignored:/node_modules/,
            // 文件改变不会立即执行,而是会等待300ms之后再去执行
            aggregateTimeout:300,
            // 原理是轮询系统文件有无变化再去更新的,默认1秒钟轮询1000次
            poll:1000
        }
    };
    
  • 相关阅读:
    CF1284G
    5-3 Harbor高可用部署 下
    5业务系统迁移kubernetes-----准备工作(平稳迁移做好准备)
    题解-CF1453F Even Harder
    题解-CF961F k-substrings
    Docker 数据卷容器(实现两个或多个容器间数据同步)
    Docker 具名和匿名挂载
    Java-IO中的节点流和处理流
    《机器学习十讲》学习报告二
    rpc基本思路
  • 原文地址:https://www.cnblogs.com/ltfxy/p/15328205.html
Copyright © 2011-2022 走看看