【已解决】Webpack-dev-server使用时一个怪现象

#1

我在学些webpack时发现一个怪现象,根据webpack-howto一书的说明 可以正常让浏览器自动刷新的

现在遇到的问题是修改文件后 控制台正常有反应但是浏览器页面不自动刷新
发现socket.io有如下xhr请求返回结果

�40	�42["hot"]�42["hash","971dd72514ae0ea260a3"]�42["ok"]

很明显这些?和40 42的不应该出现我该怎么处理。
新手一上来就遇到这个问题真够惨的,不明所以啊
还有我是在vim下编辑的代码
然后我检查了下bom头 都没有的,

发现这个对页面刷新没有影响之所以没有更新是因为我之前的操作中已经存在了bundle.js然后在使用webpack-dev-server的时候他只更新内存不更新文件,还一点就是将文件删除后会显示找不到文件,index.html中应该将
bundle.js的文件绑定地址更改为http://localhost:8080/bundle.js 因为web pack将bundle.js生成在内存中,只有经过web-dev-server的服务才能够获取到他

#3

感觉你webpack的配置有问题,最好贴一下你的源码上来。
我原来没有加 http://localhost:8080/ ,也是可以的。

#4

已经解决了,是因为我之前使用了webpack命令生成了bundle,js文件 ,然后index.html一直在调用bundle.js对于是相对于index.html存在的真实文件,webpack-dev-server打包的是一个内存文件,他没有去访问者所以才导致的这个情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<div id="app"></div>
		<script src="http://localhost:8080/webpack-dev-server.js"></script>
		<script src="http://localhost:8080/bundle.js"></script>
	</body>
</html>

我将代码改成这样就ok了自动刷新了

还是很谢谢你这么快就回复了

#5

我觉得你的 webpack.config.js 配置文件可能有问题,能贴一下吗?

#6
    var path=require('path');
module.exports={
	entry:['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
	output:{
		path:path.resolve(__dirname, 'build'), 
		filename: 'bundle.js'
	}
};	

就是这个了,应该没问题

{
  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "dependencies": {
    "react": "^0.13.3",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }
}

这个是package.json

#7

你的配置文件没什么问题。

我用这个配置的时候,写成:

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>

也没问题,真奇怪你为什么会需要写上 http://localhost:8080/ .

#8

因为不加的话找不到这个bundle.js啊


我知道原因了,我使用的是open index.html打开的 哈哈哈 给自己设了一个好大的坑

1 Like
#9

使用open index.html 打开是啥意思