webpack-dev-server 热更新 配置
2018-01-16 11:08
761 查看
vue+webpack 前端开发中,有时运行npm run dev不能自动热更新,查了一下,终于解决了,主要原因还是对webpack不了解。
问题描述:
1.npm run dev后,修改项目文件后, 没有自动更新编译,需要手动再执行npm run dev。
2.自动打开的浏览器内容不会自动更新。
问题解决:
1.config/index.js 修改dev中poll选项值为true(或时间)。
2.build/webpack.dev.conf.js 修改devServer中hot选项值为true。
原因:
1.查看build/webpack.dev.conf.js下devServer的配置信息,有一项是watchOptions(可查看webpack文档),是webpack文件变化监听的一些配置。vue init webpack xxx 构建的新项目默认只有一个poll选项,poll选项的作用在文档中有说明:
而devServer的配置中,该值为config.dev.poll:
查看config/index.js发现该值为false,也就是polling没有开启,修改为true即可。config/index.js有很多其他的配置,比如devServer端口号、是否自动打开浏览器等。
-----------------------
一个大点的项目devServer跑起来可能会在几十秒左右,有了热更新可以很快更新修改,效率提升不少呢。
问题描述:
1.npm run dev后,修改项目文件后, 没有自动更新编译,需要手动再执行npm run dev。
2.自动打开的浏览器内容不会自动更新。
问题解决:
1.config/index.js 修改dev中poll选项值为true(或时间)。
2.build/webpack.dev.conf.js 修改devServer中hot选项值为true。
原因:
1.查看build/webpack.dev.conf.js下devServer的配置信息,有一项是watchOptions(可查看webpack文档),是webpack文件变化监听的一些配置。vue init webpack xxx 构建的新项目默认只有一个poll选项,poll选项的作用在文档中有说明:
而devServer的配置中,该值为config.dev.poll:
查看config/index.js发现该值为false,也就是polling没有开启,修改为true即可。config/index.js有很多其他的配置,比如devServer端口号、是否自动打开浏览器等。
-----------------------
一个大点的项目devServer跑起来可能会在几十秒左右,有了热更新可以很快更新修改,效率提升不少呢。
相关文章推荐
- webpack-dev-server的自动更新配置
- 开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新
- Weapck 3.x 安装与配置webpack dev server
- webpack自动更新插件 webpack-dev-server
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
- webpack-dev-server远程访问配置方法
- webpack-dev-server远程访问配置
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- webpack-dev-server的配置和使用
- 使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server
- 浅谈webpack-dev-server的配置和使用
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
- webpack-dev-server自动更新页面方法
- Webpack-dev-server实际项目中配置
- 配置Webpack-dev-server+初步了解react中元素、组件、事件、props传递
- 使用webpack3.0配置webpack-dev-server教程
- webpack-dev-server 配置