一、背景

测试发布一个项目,修改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的自动更新配置的更多相关文章

  1. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  3. [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 ...

  4. Spring Cloud Bus 自动更新配置

    ---恢复内容开始--- Spring Cloud Config 结合 Spring Cloud bus 实现 git 仓库提交配置文件 触发消息队列 应用自动更新配置 1. config 服务端 添 ...

  5. 带你入门SpringCloud 之 通过SpringCloud Bus 自动更新配置

    前言 在<带你入门SpringCloud统一配置 | SpringCloud Config>中通过 SpringCloud Config 完成了统一配置基础环境搭建,但是并没有实现配置修改 ...

  6. ubuntu Server 14 自动更新

    https://help.ubuntu.com/stable/serverguide/automatic-updates.html http://spin.atomicobject.com/2014/ ...

  7. Nacos 自动更新配置不生效问题

    版本 Nacos 1.4.1 SpringCloud 2020.0.3 解决方案 bootstrap.properties 增加应用名配置即可 spring.application.name=serv ...

  8. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  9. Spring Cloud Bus实现自动更新配置

    一.概述 1. 配置环境 版本:Spring Boot版本2.0.3.RELEASE,Spring Cloud版本Finchley.SR1,RabbitMQ 3.7.7 说明:本文章是在https:/ ...

随机推荐

  1. 【北京】低价出售C/C++经典书籍

    都非常新   C++程序设计 5元 高质量C/C++编程指南 8元   C++对象模型 10元 STL源代码剖析 12元 深入浅出MFC 10元 设计模式 10元 C++ primer 8元 面向对象 ...

  2. (转)Unity3D占用内存太大的解决方法

    自:http://www.cnblogs.com/88999660/archive/2013/03/15/2961663.html 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大.  ...

  3. 【5】基于Log4Net的日志系统

    阅读目录 日志系统应具备的特性  Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.config复杂配置   不管是Web应用程序还是W ...

  4. Windows改桌面文件路径

    默认的桌面和用户文件都是C盘,每次重装系统要备份,为了方便可以把它设置到其他盘符,一种方式是通过一些软件功能,如360有一个C盘搬家,也可以修改注册表文件: Windows Registry Edit ...

  5. iOS 设置UILabel 的内边距

    iOS 设置UILabel 的内边距 - (void)drawTextInRect:(CGRect)rect { UIEdgeInsets insets = {, , , }; [super draw ...

  6. Hibernate(九)HQL查询

    一.Hibernate提供的查询方式 OID查询方式:主键查询.通过get()或者load()方法加载指定OID的对象查询结果为一个 HQL查询方式:通过Query接口使用HQL语言进行查询 QBC查 ...

  7. less 命令(转)

    原文:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux ...

  8. line-height测量及使用

    1.line-height定义 line-height表示行高,即两行文字基线间的距离. 以下是图示说明: 行高是2条红线之间的距离,即:1+2+3+4 在实际测量中,基线不好找,可测量顶线到顶线的距 ...

  9. rEFind 教程

    资料 在空白区右键,新建一个文件,命名为rEFind! 双击进入rEFind文件夹,我们开始搬文件了! 解压refind.zip 创建一个文件,仿照refind.conf-sample写一个文件,命名 ...

  10. flume的memeryChannel中transactionCapacity和sink的batchsize需要注意事项

    一. fluem中出现,transactionCapacity查询一下,得出一下这些: 最近在做flume的实时日志收集,用flume默认的配置后,发现不是完全实时的,于是看了一下,原来是memery ...