学习
实践
活动
专区
工具
TVP
写文章

Webpack轻松入门(五)——自动刷新

实际上,Webpack还提供了一个比watch更方便的功能,它不仅可以实现自动打包,还具有自动打开浏览器和自动刷新页面的功能,可以说给我们这帮懒人服务到了极致,哈哈。

下面我们就来看看具体如何实现这样的功能。

1. 安装webpack-dev-server

2. package.json中的scripts添加相关配置

其中 就代表打开默认浏览器。

3. 输入命令行进行打包

打包结束后你会发现浏览器自动打开,并且正确显示打包后的页面。

4. 更改任意代码

我们可以试着在index.js中添加以下代码:

module.js:

保存后你会发现浏览器自动刷新并弹出弹框“Hello Webpack!”。

值得注意的是,通过webpack-dev-server打包后的代码并不会进入dist目录,而是直接创建一个开发服务器,并运行打包后的代码。因此,通常我们会将Webpack打包分为两种模式:开发模式和生产模式

开发模式顾名思义就是给我们开发时候用的,这时候我们就可以用上webpack-dev-server,从代码自动打包到自动开启浏览器再到自动刷新全部自动化,提高了工作效率;生产模式顾名思义就是最终代码上线时候用的,这时候我们就只需使用其最基础的打包功能,最终打包后的代码会进入dist目录,我们只需要将其上传服务器即可。

本文重点总结

① 使用webpack-dev-server可自动创建开发服务器,实现代码从自动打包到自动刷新页面的自动化开发模式

② Webpack有两种打包模式:开发模式和生产模式,开发模式下可使用webpack-dev-server提高开发效率

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180702G008YX00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券