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

Question

package.json

{
"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

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

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
<h1>helloworld</h1>,
document.getElementById('example')
);

index.html

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

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

Answer 1

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

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

Answer 2

立永GTP 2017-11-24 17:31:00

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

• 提问者 恋空一奕 #1

  修改index.js保存后，localhost：8080没变化，自己手动刷新页面也没变化

• 立永GTP 回复 提问者 恋空一奕 #2

  你webpack有么有watch呢，没有watch需要重新在工程根目录执行一遍webpack命令

• 提问者 恋空一奕 #3

  没有用，我是想要像教程里修改index.js内容，然后页面自动更新