解决 webpack-dev-server 不能自动刷新的问题

此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。
1. webpack 不能热加载的问题
主要的问题是各个版本之间的兼容性问题,请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件,然后完整删除 node_modules 文件夹后,在项目文件夹下执行 npm install 即可。注意 Mac 系统下需要在命令前加 sudo。
安装完成后执行 webpack-dev-server --inline --hot 即可正常自动刷新了。
{% codeblock lang:js%}
{
"name": "10-03",
"version": "1.0.0",
"description": "",
"main": "root.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^2.1.0",
"babel": "^5.8.23",
"babel-core": "^6.1.21",
"babel-loader": "^6.1.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babelify": "^7.3.0",
"css-loader": "^0.25.0",
"fetch": "^1.1.0",
"json-loader": "^0.5.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-mixin": "^2.0.2",
"react-responsive": "^1.2.1",
"react-router": "^2.8.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"devDependencies": {
"babel-plugin-import": "^1.0.1"
}
}
{% endcodeblock %}
解决 webpack-dev-server 不能自动刷新的问题的更多相关文章
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [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 ...
- 解决windows文件夹不能自动刷新的问题
我用的是win7系统,最近忽然发现我的文档文件夹里的文件不能自动刷新了,就是当剪切或删除某个文件后,文件夹里的文件没有变化,看起来文件还在原文件夹中,只有通过手动刷新后才能看到效果,该如何解决? 网上 ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 解决eclipse 文件更新不自动刷新的问题
打开eclipse 1. Window ===> Preferences ===> General ===> Workspace 2. 勾选 1> Refresh using ...
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 之 webpack-dev-server自动刷新
watch 首先介绍watch选项,参考这里.可实现相关源文件改变后自动更新bundle.js文件的功能.在配置文件中添加 watch:true 或执行 webpack -w,即可开启watch功能: ...
- 【webpack】-- 自动刷新
前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们 ...
随机推荐
- SQL alwayson 辅助接点查询统计信息“丢失”导致查询失败
ALWAYSON 出现以下情况已经2次了,记录下: DBCC 执行完毕.如果 DBCC 输出了错误信息,请与系统管理员联系. 消息 2767,级别 16,状态 1,过程 sp_table_statis ...
- MVC| 路由测试代码
using System; using Microsoft.VisualStudio.TestTools.UnitTesting; using Moq; using System.Web; using ...
- elasticsearch使用bulk实现批量操作
本篇文章提供ES原生批量操作语法及使用bulk批量操作文档.文章依旧提供语法,具体实现大家根据语法,在对应处进行替换即可 一.原生批量获取文档 1.获取指定文档值(1) 语法: GET /_mget ...
- Beta冲刺! Day4 - 砍柴
Beta冲刺! Day4 - 砍柴 今日已完成 晨瑶:追进度 昭锡:改主页UI(还在 永盛:完成大部分接口和接口文档,上线代码 立强:文章去广告,适配手机屏幕.第三方编辑器整合到记录模块. 炜鸿:完成 ...
- Git的上传步骤
Git的上传步骤 1.Git的命令基础 Git是当下最流行的版本控制工具(VCS),由linux系统之父linus开发.它能实现 团队中的代码协作开发,它在代码同步和代码管理方面功能强大,理念先进. ...
- Web自动化
# -*- coding:utf-8 -*- ''' Created on Oct 17, 2018 @author: SaShuangYiBing Comment: ''' from seleniu ...
- 描述各自页面的 page
一个小程序页面由四个文件组成(注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名).分别是: 页面 Page(JS文件) Page(Object) 函数用来注册一个页面.接受 ...
- Activity启动模式 Tasks和Back Stack
http://www.cnblogs.com/mengdd/archive/2013/06/13/3134380.html Task是用户在进行某项工作时需要与之交互的一系列activities的集合 ...
- 深入浅出RxJava(三:响应式的好处)
在第一篇中,我介绍了RxJava的基础知识.第二篇中,我向你展示了操作符的强大.但是你可能仍然没被说服.这篇里面,我讲向你展示RxJava的其他的一些好处,相信这篇足够让你去使用Rxjava. 错误处 ...
- PCB (2)创建新工程原理图
1创建一个新项目 2创建一个新的原理图图纸 3将原理图图纸添加到项目 4设置原理图选项 修改单位 设置图纸大小 图纸附加说明 5绘制原理图 打开库 之后连续放置的器件会在此基础上+1 名字 描述 6 ...