webpack-dev-server的自动更新配置
一、背景
测试发布一个项目,修改jsx中的内容,页面不自动更新。
每次必须执行npm run build;然后执行npm run start。
脚本如下:
"scripts": {
"start": "webpack-dev-server --history-api-fallback --colors --no-info --open",
"build": "webpack"
},
build每次要花6秒左右,效率实在不高。
二、检查
1. webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
看的出,运行文件打包成bundle.js,存放路径在dist目录下。
2. index.html
<script src="./dist/bundle.js"></script>
引用了生成的项目文件bundle.js。
三、原因
webpack-dev-server动态生成的包并不发布到你的真实目录中(dist/),而是放在了内存中。
四、解决
将项目的指向配置到虚拟服务器中。
修改index.html中的src路径为:
<script src="http://localhost:8080/bundle.js"></script>
五、测试
. 执行npm run build。
. 然后执行npm run start。
. 修改jsx文件,保存。
哈哈,自动更新了。
这些再也不用修改一个label命名也要重启了- -!
webpack-dev-server的自动更新配置的更多相关文章
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- Spring Cloud Bus 自动更新配置
---恢复内容开始--- Spring Cloud Config 结合 Spring Cloud bus 实现 git 仓库提交配置文件 触发消息队列 应用自动更新配置 1. config 服务端 添 ...
- 带你入门SpringCloud 之 通过SpringCloud Bus 自动更新配置
前言 在<带你入门SpringCloud统一配置 | SpringCloud Config>中通过 SpringCloud Config 完成了统一配置基础环境搭建,但是并没有实现配置修改 ...
- ubuntu Server 14 自动更新
https://help.ubuntu.com/stable/serverguide/automatic-updates.html http://spin.atomicobject.com/2014/ ...
- Nacos 自动更新配置不生效问题
版本 Nacos 1.4.1 SpringCloud 2020.0.3 解决方案 bootstrap.properties 增加应用名配置即可 spring.application.name=serv ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- Spring Cloud Bus实现自动更新配置
一.概述 1. 配置环境 版本:Spring Boot版本2.0.3.RELEASE,Spring Cloud版本Finchley.SR1,RabbitMQ 3.7.7 说明:本文章是在https:/ ...
随机推荐
- 【北京】低价出售C/C++经典书籍
都非常新 C++程序设计 5元 高质量C/C++编程指南 8元 C++对象模型 10元 STL源代码剖析 12元 深入浅出MFC 10元 设计模式 10元 C++ primer 8元 面向对象 ...
- (转)Unity3D占用内存太大的解决方法
自:http://www.cnblogs.com/88999660/archive/2013/03/15/2961663.html 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大. ...
- 【5】基于Log4Net的日志系统
阅读目录 日志系统应具备的特性 Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.config复杂配置 不管是Web应用程序还是W ...
- Windows改桌面文件路径
默认的桌面和用户文件都是C盘,每次重装系统要备份,为了方便可以把它设置到其他盘符,一种方式是通过一些软件功能,如360有一个C盘搬家,也可以修改注册表文件: Windows Registry Edit ...
- iOS 设置UILabel 的内边距
iOS 设置UILabel 的内边距 - (void)drawTextInRect:(CGRect)rect { UIEdgeInsets insets = {, , , }; [super draw ...
- Hibernate(九)HQL查询
一.Hibernate提供的查询方式 OID查询方式:主键查询.通过get()或者load()方法加载指定OID的对象查询结果为一个 HQL查询方式:通过Query接口使用HQL语言进行查询 QBC查 ...
- less 命令(转)
原文:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux ...
- line-height测量及使用
1.line-height定义 line-height表示行高,即两行文字基线间的距离. 以下是图示说明: 行高是2条红线之间的距离,即:1+2+3+4 在实际测量中,基线不好找,可测量顶线到顶线的距 ...
- rEFind 教程
资料 在空白区右键,新建一个文件,命名为rEFind! 双击进入rEFind文件夹,我们开始搬文件了! 解压refind.zip 创建一个文件,仿照refind.conf-sample写一个文件,命名 ...
- flume的memeryChannel中transactionCapacity和sink的batchsize需要注意事项
一. fluem中出现,transactionCapacity查询一下,得出一下这些: 最近在做flume的实时日志收集,用flume默认的配置后,发现不是完全实时的,于是看了一下,原来是memery ...