设置webpack --watch 修改源文件的js文件会删除html文件

最新推荐文章于 2025-12-01 11:04:00 发布
原创 最新推荐文章于 2025-12-01 11:04:00 发布 · 302 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #plugin

浏览器报错：

报错原因：

插件CleanWebpackPlugin中没有加参数{cleanStaleWebpackAssets:false}，导致在监听模式下将没有改变的html文件清除。

解决方案：

给插件CleanWebpackPlugin添加参数

再次执行：npm run webpack --watch

此时不管在源文件里修改html文件或者是js文件都可以自动更新到网页中

详解webpack-dev-middleware 源码解读
11-20
1. **Watch Mode**: 它以监听模式启动 **webpack**，在源文件发生变化时自动重新编译，生成最新的 bundle。 2. **中间件机制**: 作为 **Express** 或其他 Node.js 服务器框架的中间件，它接收并处理 HTTP 请求，将...
gulp-webpack-boilerplate:gulp-webpack-样板
05-21
1. **文件监听**：通过`gulp.watch()`方法监听源文件的变化，当文件发生变化时自动触发webpack的重新构建。 2. **编译任务**：可能包括Babel转换ES6+语法，或者PostCSS处理CSS预处理器。 3. **清理输出目录**：在...
webpack使用观察模式watch是，修改发现index.html消失了
qq_40285497的博客
05-28 828
从webpack英文文档可以看出，正确使用方式要给webpack.config.js中CleanWebpackPlugin一个参数；具体代码如下 plugins: [ new CleanWebpackPlugin({cleanStaleWebpackAssets: false}), new HtmlWebpackPlugin({ title: 'Development' }) ] 官方描述：Change your confi
html监听文件保存,webpack 监听html文件
weixin_33022901的博客
07-02 504
在使用webpack-dev-server时，js改变，webpack就会重新构建项目，并且浏览器会自动刷新，但是编辑html文件时，webpack-dev-server却毫无反应。原因由于webpack(webpack-dev-server)只监听有依赖得相关文件，比如html等没有依赖的文件是不会被webpack watch监听的。既然有依赖关系才会被webpack watch监听，那么就把h...
webpack环境 -- webpack -watch
彩虹
07-31 1127
运行 webpack -watch 可自动搭建一个服务器环境. webpack -w –progress 查看打包进度 插件 : clean-webpack-plugin 每次打包清除插件 var ClearWebpackPlugin = require('clean-webpack-plugin') plugins:[ new ClearWebpackPlugin (['di...
npm 及 webpack 使用方法（至 开发 部分）
qq_20535249的博客
09-02 835
使用webpack前提：已经安装npm（安装node.js已经包含npm） 1.安装webpack 使用webstorm打开工程文件夹，在命令行工具中输入 npm init -y //初始化npm npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack） 【可选】...
【webpack执行npm run dev后dist文件被清空】
qq_43542681的博客
08-16 1633
轻松解决webpack执行npm run dev后dist文件被清空的BUG
c-webpack-demo:只需在您JavaScript项目中导入C代码
05-16
`-w`或`--watch`选项让Webpack监视源文件的变化，并在检测到更改时自动重新构建。这确保了当C代码或者JavaScript代码变动时，项目会自动更新。 3. **启动网络服务器**：`http-server .`命令用于启动一个本地HTTP...
webpack-static-site-boilerplate:具有ES6 +，SASSLESS支持，开发服务器和livereload的Webpack 4静态站点样板
05-13
在开发模式下构建，并在./src监视源文件，在文件更改时进行构建： npm run watch 开发版本 以开发模式构建： npm run dev 产品构建 以生产模式构建，并进行了优化和最小化： npm run prod 设置 npm i 预处理程序...
Run 'webpack --help' to see available commands and options
08-14
webpack 是一个模块打包工具，它通过命令行接口（CLI）提供了丰富的功能来处理项目中的各种资源文件，如 JavaScript、CSS、图片等。以下是对 webpack 命令行可用命令和选项的详细说明。 ### 常用命令 - **`webpack...
webpack 的 demos
前端乱搞 vinvin1022
03-19 883
本仓库是一些webpack简单的demo集合。 这些demo故意写的简单但调理清楚，你会发现学习这个强大的工具一点都不难 怎么使用 首先，全局安装 Webpack 和webpack-dev-server $ npm i -g webpack webpack-dev-server 然后克隆本仓库再安装依赖 $ git clone git@github.com:ruany
关于Vue cli 3的 vue.config.js 配置实时打包问题，启动npm run build命令，webpack的watch实时打包文件
qq_34648151的博客
01-30 7660
vue-cli 3.0项目 vue.config.js 配置，npm run build之后，webpack的watch实时打包（dist）文件 vue-cli 3.0 官方配置文档链接 点击进入，vue-cli 3.0 官方配置文档链接，更加深入了解详细配置 vue-cli 3.0 不建议直接修改webpack，提供两个配置参数，以供修改webpack里面配置项 1. chainWebpa...
vue项目 npm run build后 在浏览器上打开index.html常见问题
H的博客
12-11 3284
1.打开报错 解决方法 config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可 2.打开后使用的icon字体图标不显示 解决方法 build文件里的utils.js里添加publicPath:'../../' ，重新build即可 ...
webpack 中的 watch & cache （下）
weixin_34242331的博客
02-18 462
整个 watch 的过程通过事件的机制，完成几个抽象对象的逻辑串联，当触发 Watching.prototype.watch 的调用回调函数时，流程便进入到了另外一端，开始进行重新编译，相较于第一次编译，在 webpack 中在二次编译阶段利用了很多缓存机制，来加速代码编译。 文章描述会涉及到整个 webpack 的编译流程，有一些细节可...
【转】webpack使用步骤和报错解决方法
weixin_43222587的博客
04-14 651
1.点击这里，webpack4.+的使用（一） 2.点击这里，webpack4.+的使用（二）(css、less、file-loader的使用) 3.点击这里，Webpack的使用（三）（html-webpack-plugin、webpack-dev-server、vue-loader 、CommonsChunkPlugin）
Webpack不生成index.html
likunpeng6656201的博客
10-22 1776
没有导出你的最后2个插件，并且没有指定html文件名dist，因为HtmlWebpackPlugin应该生成相对于path，下面是固定配置： var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); ...
vuecli3+webpack4优化实践（删除console.log和配置dllPlugin）
weixin_33966365的博客
03-10 6992
本文主要介绍如何在vuecli3生成的项目中，打包输出时删除console.log和使用dllplugin，并记录了配置过程中踩到的坑。 （本人水平有限～希望大家多多指出有误的地方） 一、生产环境中删除console.log 在开发代码中写的console.log，可以通过配置webpack4中的terser-webpack-plugin插件达成目的，compress参数配置如下: module....
Vite 和 Webpack 这两款主流前端构建工具的核心区别，包括它们的设计理念、工作机制和实际使用体验上的差异。
最新发布
只会写bug
12-01 290
Vite与Webpack是两种架构不同的前端构建工具。Webpack采用打包优先策略，开发和生产环境均需构建bundle，配置复杂但生态成熟；Vite则利用原生ES模块，开发时按需编译实现毫秒级启动和热更新，生产阶段使用Rollup打包。Webpack适合复杂传统项目，Vite更适配现代框架项目，提供更优开发体验。选择时，新项目推荐Vite，传统大型项目可继续使用Webpack。（149字）
[Amplify]项目aws-amplfiy服务旧版本升级v6经验分享
m0_74217128的博客
11-28 869
前些天公司发下来给一个项目的aws-amplify服务升级到v6的任务，以下是我的升级经历和总结，希望对你有所帮助。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值