使用 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 

webpack-dev-server 基础配置 

第二步:将其写入项目依赖。


npm install webpack-dev-server --save-dev

webpack-dev-server 基础配置 第三步:修改 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 文件即可在网页上立即看到变更反应。

以上为本文全部内容,希望对学习有所帮助,欢迎支持本站。

作者最新文章