webpack—自动编译和自动刷新浏览器

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

#webpack #dev-server

webpack—webpack-dev-server的使用


在日常的webpack项目的开发中，如果每次测试都需要自己手动的编译和刷新浏览器，那么将会是一个无比痛苦和低开发效率的事情，所以为了提高我们的开发效率，我们希望我们每次编辑代码的时候，webpack可以自动编译并且刷新浏览器，而这里我们就可以使用webpack-dev-server这个插件了。

本章只介绍关于webpack-dev-server的自动编译和自动刷新的功能。它还有更多相关的用法和配置，我们放到下面一章来说。

webpack-dev-server

它的使用非常的简单，我们只需要安装模块，并启动就可以了

安装

// 这里使用开发依赖
yarn add webpack-dev-server --dev

启动

使用非常简单，我们只需要调用下面的命令，它就会帮我们去编译代码并且开启一个web服务

yarn webpack-dev-server

执行之后我们可以看到它不仅帮助我们进行编译，还开启了一个端口为8080的web服务
在这里插入图片描述

自动打开浏览器

我们还可以加入参数使其自动帮助我们打开浏览器

yarn webpack-dev-server --open

启动之后，当我们修改代码的时候，webpack就是自动编译，并且刷新浏览器了。

优化执行命令

每次都使用yarn webpack-dev-server --open指令显得不那么方便
我们可以定义一个脚本命令来使其快速执行，在package.json文件中的script字段中，添加对应的脚本命令

在这里插入图片描述
那么我们就可以很方便的运行了

yarn dev  // 即可执行

这里需要注意的是webpack-dev-server打包的代码是放在内存中的，并不会生成dist目录。

以上内容仅供学习参考

深入理解webpack自动刷新浏览器
weixin_39963132的博客
12-06 1430
文章目录1. 自动刷新浏览器1.1 监听文件变化1.1.1 方式1.1.2 原理1.2 自动刷新浏览器1.2.1 原理2. 模块热更新2.1 两种方式2.1.1 webpack-dev-server2.1.2 webpack-hot-middleware 我们在日常开发时，有一个需要在开发状态下的优化，就是浏览器能自动显示修改后的代码，而无需我们手动刷新 1. 自动刷新浏览器 为了能实现浏览器自动刷新，需要做两件事情: 监听文件变化 自动刷新浏览器 1.1 监听文件变化 监听文件变化是在webpack模
一文学会Webpack实用功能|自动刷新
xuzhijia1991的博客
01-05 2638
Webpack 开发体验问题 在此之前我们已经了解了一些webpack的相关概念和一些基本的用法，但是如果以目前的状态去应对日常的开发工作还远远不够，那是因为编写源代码，再通过webpack打包，然后运行应用，最后刷新浏览器这周周而复始的方式过于原始。 如果说我们在实际的开发过程中还按照这种方式去使用必然会大大降低我们的开发效率。那究竟该如何去提高我们的开发效率呢，那这里呢我们先对我们理想的开发环境做出设想。 首先我们希望这样一个开发环境他必须能够使用http的服务去运行而不是以文件的形式去预览，那这样我们
简单配置webpack自动刷新浏览器
weixin_34337381的博客
12-01 678
文档地址 http://webpack.github.io/docs/usage.html 首先全局安装webpack(我这里使用的是淘宝的cnpm) cnpm install webpack 检查一下是否安装完毕，查看版本号 webpack -h 简历package.json文件 npm init 一直enter就可以了 然后再本地安装一次webp...
42 webpack优化-自动刷新优化
sinat_41212418的博客
12-15 333
自动刷新优化 控制刷新方式的就是DevServer里面的inline配置，默认为true，所以默认自动刷新使用的代理客户端。其机制是为每一个Chunk注入代理客户端（因为DevServer不知道网页依赖哪些Chunk，所以就给每一个Chunk注入代码客户端代码），正因为如此，当我们项目输出很多Chunk的时候，就会导致构建缓慢。 当设置inline为false的时候，这个时候刷新机制就变成了通过刷新网页内嵌的iframe来达到刷新页面的效果。配置如下： devServer: { open: true
webpack自动刷新
weixin_33901641的博客
02-03 253
webpack.config.js var path = require('path'); module.exports = { entry: { index:'./js/components/index' }, externals: [{ 'react-dom':'ReactDOM', 'react...
Webpack自动编译与实时刷新TypeScript教程
通过以上知识点，我们可以看到，要实现“自动编译ts文件并且引入，自动刷新浏览器不需要手动操作”的效果，需要对TypeScript和Webpack有一定的了解，并且需要正确配置相关的工具和参数。这些内容构成了一个前端开发...
webpack结合express实现自动刷新的方法
10-17
在开发过程中，实时刷新功能（热更新）对于提高开发效率至关重要，它可以在代码修改后自动重新编译并刷新页面，无需手动刷新浏览器。 要实现Webpack与Express结合的自动刷新功能，我们首先需要配置Webpack。在`...
Express结合Webpack的全栈自动刷新
12-09
`BrowserSync` 是一种解决这个问题的工具，它能够实现在保存文件后自动刷新浏览器。然而，随着 `Webpack` 的流行，前端资源的管理和编译变得更加复杂。`Webpack` 需要在每次保存文件后对静态资源进行编译，因此自动...
webpack配置---设置快捷打包和浏览器自动刷新
weixin_30256901的博客
12-19 421
1.设置快捷打包 找到package.json中scripts 之后再输入命令npm run build 2.设置浏览器自动刷新 要先安装html-webpack-plugin这个插件再配置 3.将css文件从js中抽离出来要安装ExtractTextWebpackPlugin这个插件 插件官网地址：https://www.webpackjs.com/plug...
webpack当打包的依赖文件被修改时自动重新编译 自动刷新浏览器运行效果 (WebpackDevServer)
weixin_45966674的博客
01-26 2620
这篇文章会基于我 (webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)) 这篇文章搭建的项目环境开展 没有看过这篇文章的话，建议去看一下 https://blog.csdn.net/weixin_45966674/article/details/122695188?spm=1001.2014.3001.5501 首先我们在项目终端执行 npm install webpack-dev-server --save 将webpack-dev-ser
webpack实现热加载自动刷新的方法
01-19
本文介绍了webpack实现热加载自动刷新的方法，分享给大家，具体如下： 一、webpack-dev-server 一个轻量级的服务 功能：修改代码及时呈现到浏览器上。 第一步：安装 npm install webpack-dev-server -g   第二步：写入到依赖 npm install webpack-dev-server --save-dev 第三步：修改webpack配置文件 module.exports = { entry:./js/index.js, output:{
open-browser-plugin:一个webpack插件来解决webpack-dev-server无法通过节点api自动打开浏览器的问题
05-06
浏览器插件 一个webpack插件来解决webpack-dev-server无法通过节点api自动打开浏览器的问题 如何使用 npm i -- save - dev open - browser - plugin // webpack.config.js const OpenBrowserPlugin = reuire ( 'open-browser-plugin' ) const config = { plugins : [ new OpenBrowserPlugin ( { port : 8080 } ) ] } 选项 港口 默认8080 主持人 默认localhost 协议 默认hppt:
webpack打包，webpack实现自动打包刷新
XXH3L的博客
03-03 620
项目结构准备步骤：（webpack本质：node环境下的包）
webpack 生产环境打包后 浏览器自动刷新
u012174809的专栏
01-06 650
不知你们是如何处理的，每次打包前端放在生产服务器中，用户需要手动刷新才能看到最新内容，虽然我看过浏览器缓存策略，知道是怎么回事，但还是想想有没有解决的办法，毕竟体验感非常不好。可惜，查阅了大部分文献后，结果还是，做不了。 附上webpack的总结 详情可查阅，这位博主说的非常清晰 Webpack进阶配置 - 知乎 ...
vue webpack 自动打开页面_webpack+vue打包方式
weixin_32816563的博客
12-28 515
1.ajax请求如果请求要添加cookie，已达到登录的效果，需要在ajax的属性中添加xhrFields: {withCredentials: true}。2.ajax传送canvas图片，canvas.toDataURL(type)，type默认为image/png，将canvas转换成base64格式，但是base64无法直接以字符的形式传送给后台接口，需要以formdata上传文件的方式...
推荐一款神器：Browser-Sync-Webpack-Plugin - 实时刷新，提升前端开发效率
gitblog_00033的博客
04-27 595
推荐一款神器：Browser-Sync-Webpack-Plugin - 实时刷新，提升前端开发效率 在前端开发中，每次修改代码后手动刷新浏览器以查看效果，无疑是一种低效且繁琐的工作方式。为了解决这个问题，我们今天要介绍的是一个强大的工具——。这个插件结合了Webpack和BrowserSync的功能，能够在代码保存后自动刷新浏览器，极大地提升了开发者的生产力。 项目简介 Browser-Sync...
【webpack】-- 自动刷新与解析
weixin_34240520的博客
02-26 329
前端需要频繁的修改js和样式，且需要根据浏览器的页面效果不断的做调整；而且往往我们的开发目录和本地发布目录不是同一个，修改之后需要发布一下；另外一点就是并不是所有的效果都可以直接双击页面就能看到，我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手工刷新浏览器和手动(或点击)发布，还要启动站点，确实是个不小的体力活。而这三点webpack可以帮我们做到...
webpack配置导致浏览器自动刷新/iframe问题
最新发布
Huanzhi_Lin的博客
04-10 318
webpack，liveReload，iframe，inline
webpack5 webpack-dev-server不会自动刷新页面
Skybububu的博客
09-12 837
当安装使用 webpack-dev-server 开发工具后，发现页面发生改变时会触发重新打包，但是并不会触发页面的自动刷新。这是因为 webpack5 中有些特性发生了改动，要想实现自动刷新，要在 devServer 中配置 watchFiles。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值