请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

http://localhost:8080/ 修改index.html中内容无法自动刷新,要重新webpack 才能看到改动后的效果

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"name""helloreact",
"version""1.0.0",
"description""",
"main""index.js",
"scripts": {
"test""echo \"Error: no test specified\" && exit 1",
"start""webpack-dev-server --progress --inline",
"dev""set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088"
},
"author""lhz",
"license""ISC",
"dependencies": {
"babel-preset-react""^6.24.1",
"babelify""^8.0.0",
"react""^15.5.4",
"react-dom""^15.5.4"
},
"devDependencies": {
"babel-core""^6.26.0",
"babel-loader""^7.1.2",
"babel-preset-es2015""^6.24.1",
"babelify""^8.0.0",
"es2015""0.0.0",
"react-hot-loader""^3.1.3",
"webpack""^2.3.2",
"webpack-dev-server""^2.4.2"
}
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');
var webpack = require('webpack');
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "./src/js/bundle.js",
publicPath: "/src/"
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
include: __dirname,
query: {
presets: [ "es2015""react" ]
}
}]
}
}

index.js

1
2
3
4
5
6
7
var React = require('react');
var ReactDOM = require('react-dom');
 
ReactDOM.render(
<h1>helloworld</h1>,
document.getElementById('example')
);

index.html

1
2
<div id="example">helloreact</div>
<script src="./src/js/bundle.js"></script>

https://img1.sycdn.imooc.com//szimg/5a17e0760001903508930699.jpg

https://img1.sycdn.imooc.com//szimg/5a17e0760001177c15010818.jpg

修改index.html时命令行有变化,但是localhost无变化

正在回答 回答被采纳积分+3

插入代码

2回答

提问者 恋空一奕 2017-11-25 10:26:02

已经解决了,应该是webpack与其他插件不兼容的问题,把node_modules删掉,复制老师的package.json  执行npm install命令就可以了

1 回复 有任何疑惑可以回复我~
立永GTP 2017-11-24 17:31:00

webpack server启动了么,没启动需要手动刷页面

1 回复 有任何疑惑可以回复我~
  • 提问者 恋空一奕 #1
    修改index.js保存后,localhost:8080没变化,自己手动刷新页面也没变化
    回复 有任何疑惑可以回复我~ 2017-11-24 17:36:31
  • 立永GTP 回复 提问者 恋空一奕 #2
    你webpack有么有watch呢,没有watch需要重新在工程根目录执行一遍webpack命令
    回复 有任何疑惑可以回复我~ 2017-11-24 17:55:48
  • 提问者 恋空一奕 #3
    没有用,我是想要像教程里修改index.js内容,然后页面自动更新
    回复 有任何疑惑可以回复我~ 2017-11-24 18:01:02
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信