webpack-dev-server 热更新 配置

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选项的作用在文档中有说明:

webpack-dev-server 热更新 配置_第1张图片

而devServer的配置中,该值为config.dev.poll:

      webpack-dev-server 热更新 配置_第2张图片

查看config/index.js发现该值为false,也就是polling没有开启,修改为true即可。config/index.js有很多其他的配置,比如devServer端口号、是否自动打开浏览器等。

-----------------------

一个大点的项目devServer跑起来可能会在几十秒左右,有了热更新可以很快更新修改,效率提升不少呢。

你可能感兴趣的:(vue.js,webpack)