webpack中的热更新/热启动配置

Rᴜɴɪɴᴛᴏ

于 2023-03-21 12:16:45 发布

阅读量544

点赞数

文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/m0_68652823/article/details/129420409

版权

本文介绍了如何配置webpack的devServer实现热启动和热更新功能，通过设置hot为true启用热加载，并在webpack.config.js中配置contentBase、host、port和compress等参数。同时，文章提到了在package.json的scripts中配置启动命令，使用webpack-dev-server--modedevelopment--open以开发模式启动并自动打开浏览器。

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

热启动:自己启动项目

热更新：更改完代码代码，浏览器一刷新就能出现最新的效果

配置，webpack.config.js中

devServer: {//配置此静态文件服务器，可以用来预览打包后项目
                hot: true,//热加载
                contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
                host: 'localhost',//主机地址
                port: 9090,//端口号
                compress: true//开发服务器是否启动gzip等压缩
            }

配置启动命令

在package.json的scripts中配置

"dev": "webpack-dev-server --mode development --open"

webpack中的热更新/热启动配置

配置，webpack.config.js中

配置启动命令