webpack之监测配置文件的修改而自动构建（六）

最新推荐文章于 2024-04-25 19:03:14 发布

原创最新推荐文章于 2024-04-25 19:03:14 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack配置文件监测 #nodemon #webpack

webpack 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用nodemon工具实现对Webpack配置文件的实时监控，并自动触发构建过程，提高开发效率。

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

在webpack的自动构建中，一般情况下我们只是监测到源文件的变化，如果修改webpack的配置文件就不会发生自动构建。本文通过使用node的nodemon模块来达到目的。

一、安装nodemon

//全局安装
npm install -g nodemon
//本地安装
npm install --save-dev nodemon

二、使用nodemon

nodemon --watch config dev.js

解释：

–watch config表示监测config目录下的文件变化
–dev.js则为webpack本来的通过 node dev.js形式执行的构建起始文件
总体意思就是：监测config中的文件变化并重新执行dev.js文件

三、注意事项

如果nodemon是全局安装，nodemon –watch config dev.js可以直接在命令行中执行
如果nodemon是本地安装需要如下处理：

//在package.json中scripts中加如下配置
"startNodemon":"nodemon --watch config dev.js"

//在命令行中执行
npm run startNodemon

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wl_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

浮生离梦的博客

04-09

1134

一、webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩 webpack 中的文件监听，文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。webpack开启监听模式，有两种方式，如下所示：启动 webpack 命令时，带上 --watch 参数在配置 webpack.config.js 中设置 watch: true webpack 中的文件监听使用，唯一缺陷是每次需要手动刷新浏览器，代码如下： "scripts": { "build": "webpack",

Webpack Webpack打包文件配置基本使用

SillyBoy的博客

07-06

570

文章目录webpack1 概念1.0 webpack发展历史1.1 官方解释1.2 功能1.3 核心概念1.4 入口（entry）1.5 输出（output）1.6 loader1.7 插件（plugin）1.8 模式（mode）1.9 浏览器兼容性（browser compatibility）1.10 环境（environment）2 入口（entry）2.1 基本使用2.2 配置打包的入口和出口2.3 配置webpack的自动打包功能2.4 配置html-webpack-plugin生成预览界面2.5

参与评论您还未登录，请先登录后发表或查看评论

webpack文件监听

仇益阳的博客

06-10

1297

webpack文件监听启动webpack命令时带上–watch 在配置webpack.config.js文件时设置watch:true

webpack之文件监听

liuhua_2323的博客

11-29

715

webpack中的文件监听文件监听是在源代码发生变化时，自动构建出新的输文件。 webpack开启监听模式，有两种方式： 1.启动webpack时，带上--watch参数，可以在package.json中配置 "watch":"webpack --watch" 2.在webpack.config.js中设置watch:true module.exports={ wat...

webpack自动化构建工具笔记

qq_37642495的博客

02-04

370

1、中文文档：http://doc.webpack-china.org css依赖于图片箭头指向的是要依赖的东西将静态资源（.js .css .jpg .png）简言之就是模块打包成静态资源上线； webpack又叫模块打包器认为所有的文件都是模块 html不算模块认为就应该有的结构 4个核心概念：入口（entry）输出（output）loader 插件注意：本身只能加载js ...

前端webpack构建react系列二：开发阶段，热模块替换（HMR，热更新）

kiramario的博客

03-19

1679

热更新在前端开发中，我们做的最频繁的是刷新浏览器，清楚缓存。如果以webpack打包方式开发，修改代码的时候我们还需要重新构建，再重新刷新浏览器，效率肯定很低。采用热更新技术可以提高效率，通俗就是说，我一修改js文件且保存，webpack自动构建，浏览器自动刷新。感觉很黑科技，其实就是用webpack把js打包到内存里面，为了达到此效果，我们需要配置一个本地服务器，主页面请求此服...

webpack-dev-server启动的前端项目使用nodemon监听自动重启

风烟

01-24

881

原来启动是这样 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 修改webpack需要手动重启，现在使用nodemon配置为自动重启 "start": "nodemon --exec npm run dev", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 然后配置

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

10-14

2. **配置文件设置**：在`webpack.config.js`中设置`watch: true`，并且可以进一步配置`watchOptions`以优化监听行为，例如忽略某些文件、设置聚合超时（aggregateTimeout）和轮询间隔（poll）等。 ```javascript ...

webpack自动化：自动刷新与解析配置详解

- **零配置启动**：默认情况下，webpack-dev-server会寻找`webpack.config.js`配置文件，但也可以通过命令行参数进行配置。 - **内容协商**：WDS支持通过HTTP/2的服务器推送（Server-Sent Events 或 WebSocket）...

webpack面试题(持续汇总ing。。。)

最新发布

g841805的博客

04-25

1406

webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。

webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server

05-05

webpack-config-reload 热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。注意：只支持 webpack/webpack-dev-server 两个命令。安装与使用使用 npm 安装： $ npm install webpack-config-reload --save-dev # 或者全局安装 $ npm install -g webpack-config-reload 推荐放到 package.json 中以执行 npm/yarn 脚本命令： { "scripts": { "start": "wc-reload webpack-dev-server --config webpack

Webpack中的文件监听与热更新

分享前端工程化、动效魔法与性能之舞！

01-02

922

轮询判断文件的最后编辑时间是否变化，某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等待设置的缓存等待时间过后再去执行。--config webpack.dev.js => 开发模式下，执行webpack.dev.js；插件可以不刷新浏览器实现热更新，它在更新时不输出磁盘，而是将更新的存在内存里面。上面两种方式的缺点是每次需要手动刷新浏览器，为了方便开发，我们需要用到热更新。1. 启动 webpack 命令时，带上 --watch 参数；--open => 构建完成后，自动的开启浏览器。

webpack配置

m0_60505147的博客

10-09

1万+

webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。

webpack超详细配置, 使用教程(图文)

热门推荐

翾的博客

05-06

10万+

博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install

webpack的文件监听实现（热更新）

态度决定一切

06-19

6674

注意：安装之前，先保证webpack项目能正常运行！目录前言1 第一种方式， --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。1.4 文件监听的原理理分析2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-dev-se...

Webpack

tooby的专栏

09-04

336

阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的...

Spring集成React用来开发前端----maven项目中用webpack打包react相关组件

linfujian1999的博客

05-23

2万+

实施开发环境的搭建参考我的另一篇博文 Spring集成React用来开发前端—-SpringMVC + react 开发实时测试之前的文章主要介绍了react及如果使用，但是在spring开发中可能需要集成react到开发环境中，这里mark一下：主要参考spring+react ，其中的rest没有涉及。spring官网上主要是springBoot集成react，其实官网的reference要

解决 webpack/webpack-dev-server 监听文件时频繁触发编译和回调的问题

weixin_33701294的博客

01-31

496

问题背景 webpack 的使用其实并没有太多难点，对于开发者来说，webpack 是一个黑盒，按照官方配置即可快速的配置开发环境。同样的，如果使用过程中有一些不常见的报错或异常行为，这个 webpack 黑盒产生报错或异常的原因就较难排查。比如，如果文件 index.js 在被修改后，立刻作为 webpack 的入口文件，并启动 ...