webpack的watch
文章目录
- 命令参数
- npm scripts
- webpack.config.js
- 参考文章
借用 webpack中的source map 的demo。
开发过程中频繁修改,每次改动都要手动npm run build
,很不耐烦,有啥好法子么?
当!然!有!
开启监听模式,能够监听文件变化,一旦文件内容更新,webpack就会自动重新编译,解决了 手动npm run build
的烦恼。
但想看到 文件更新后的 效果,还是需要 手动刷新 浏览器。
命令参数
webpack help
--watch
使用监听模式--watch-aggregate-timeout=xxx
单位是ms
。
--watch-aggregate-timeout=300
的意思是,文件修改且保存完后,延迟300ms
后再重新编译watch-poll=yyy
单位是ms
。
watch-poll=1000
的意思是,每隔1s
轮询一次,询问文件是否发生变化。
npm scripts
//package.json"scripts": {"build": "webpack --config webpack.config.js","watch":"webpack --watch --watch-aggregate-timeout=5000 --watch-poll=1000 --config webpack.config.js"},
演示中,将--watch-aggregate-timeout
设置为5000
,即5s
。
从 文件修改保存 到 重新编译,能感受到明显的时延。
webpack.config.js
//webpack.config.js
const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {mode:"development",devtool:"cheap-source-map",watch:true,watchOptions:{aggregateTimeout:300,poll:1000,ignored:/node_modules/},entry:"./index.js",output:{filename:"bundle.js",path:path.resolve(__dirname,"dist")},plugins:[new CleanWebpackPlugin()]
}
watch:true
开启监听模式。默认false
,即关闭监听模式watchOptions
aggregateTimeout:300
同--watch-aggregate-timeout
。
单位是ms
。文件修改并保存后,300ms
后再重新编译poll
同--watch-poll:1000
。
单位是ms
。每1s
轮询一次,查看文件是否发生变化。ignored
ignored
,“忽略”的意思。ignored:/node_modules/
,即不监听node_modules
目录下文件的变化。
参考文章
使用监听模式
watch
webpack的watch相关推荐
- 第四天:Vue组件的slot以及webpack
插槽 认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
- 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
- linux怎么卸载webpack,安装webpack后,执行webpack -v命令时报错:SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
- express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
- vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
- webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录(一)
webpack简介 我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
- 在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
- webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
- webpack打开项目命令_配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
- 修改html时webpack热更新,webpack学习之路(二)webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
最新文章
- 《任正非:我若贪生怕死,何来让你们英勇奋斗》
- 【NetApp】关于Snapmirror强制停止的一点记录
- AtomicLong可以被原子地读取和写入的底层long值的操作
- java memorycache原理_JVM代码缓存区CodeCache原理及用法解析
- 【清华集训2016】Alice和Bob又在玩游戏
- PCL:PCL可视化显示点云
- 简单动态规划问题分析
- 【ArcGIS微课1000例】0011:ArcGIS空间查询(按位置选择Select by Location)完全案例详解
- git指令如何葱master转到dev_看完这篇还不会用Git,那我就哭了
- C++ 内嵌汇编 实现 加法操作
- 手机模板区块(HTML、CSS)
- 第六届中国云计算大会详细日程
- cocos 发布android 返回值2,用cocos creator打包发布的时候,编译失败是怎么回事?执行命令出错,返回值:1。...
- PHP关于错误抑制符@的使用
- 快手滑块验证码分析 2022/03/17
- STM32F103C8T6最小系统
- 怎么停止skywalking_SkyWalking 告警设置
- 为什么说10月24日是程序员的节日?
- 51cto mysql下载_安装Mysql服务_大神程序员养成之路-Mysql数据库基础_MySQL视频-51CTO学院...
- 【机器学习】泛化误差上界
热门文章
- 第一次入住CSDN的自我介绍与个人心得(专升本版本)
- 对话朱嘉明:元宇宙的商业前景、技术路径和治理规则
- php怎么求阶乘_编写PHP递归函数求10的阶乘。
- MyBioSource 水痘-带状疱疹病毒 (VZV-gE) 抗体化学性质
- 如何随意修改网页内容
- matlab simulink 微分,Matlab/Simulink建模详解:一阶时变偏微分方程的求解
- poc weblogic 漏洞利用_Weblogic 漏洞利用总结
- vue3.0中设置网页title
- DaoCloud道客:云原生多云应用利器-Karmada控制器
- 基层反映四问题影响当前住宅小区物业管理