使用 webpack-dev-server 实现代码热更新与自动刷新
作者:脚本小铺时间:2026-10-22 06:30:00浏览:169
本文详解如何利用 webpack-dev-server 实现开发环境下的代码热更新与浏览器自动刷新。通过安装依赖、配置 webpack 入口输出及加载器,并启用 --hot 和 --inline 参数,开发者可在修改 CSS 或 JS 后即时查看效果,提升前端开发效率。
本文介绍如何利用 webpack 实现代码热加载及浏览器自动刷新功能,供开发者参考实践。
webpack-dev-server 基础配置
一、webpack-dev-server
这是一个轻量级的开发服务器工具。
其核心功能是在代码修改后,即时将变更同步呈现到浏览器中。
第一步:安装
npm install webpack-dev-server -g
第二步:将其写入项目依赖。
npm install webpack-dev-server --save-dev
第三步:修改 webpack 配置文件。
Webpack 配置文件修改
module.exports = {
entry:"./js/index.js",
output:{
path:"/",
//注意这里的改变,必须是根目录,指定目录无效,因为webpack会在内存中根目录下生成下面文件名。
filename:"bundle.js"
},
module:{
loaders:[
{ test:/\.css$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
},
resolve:{
extensions:['.vue','.js',".css",'jsx'] //自动补全识别后缀
}
}
说明:若需指定输出目录,需自行研究 Content Base 命令的使用。
第四步:修改 index.html。
<script type="text/javascript" src="bundle.js"></script>
第五步:运行以下命令以启用自动刷新功能。
启动命令与访问测试
webpack-dev-server --hot --inline
说明:
webpack-dev-server 默认监听端口为 8080。
第六步:
访问 http://localhost:8080/index.html,随后修改 CSS 文件即可在网页上立即看到变更反应。
以上为本文全部内容,希望对学习有所帮助,欢迎支持本站。
作者最新文章
JS压缩后代码报错怎么调试?Source Map使用详解
2026-11-05 09:05:04
JS压缩会破坏代码逻辑吗?兼容性风险与测试建议
2026-11-03 17:13:03
Next.js 与 Vite、Create React App 的优缺点对比
2026-11-03 15:27:33
js文件加载失败或404错误的常见原因与排查
2026-11-03 10:38:55
前端项目打包生成 JS 文件的核心步骤完整记录
2026-10-31 21:04:46
