我在StackOverflow和GitHub的问题中找到了许多答案,但是我仍然无法解决Webpack中的热模块替换问题。我使用npm start
以及webpack-dev-server--hot--inline
来运行服务器。我想改变React组件中的代码,但是浏览器中没有任何变化。
我的浏览器是Google Chrome Version 49.0.2623.87(64位)在Ubuntu 14.04LTS上。
在我的浏览器控制台中,我得到以下日志消息:
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
但是,没有热/实时重新加载发生。当我改变React组件文件中的代码时,没有显示任何内容。我正在遵循这个教程的第一个视频,Egghead.io/ReactFundamentals,在那里一切都正常。
以下是我的package.json和webpack.config.js文件。
package.json
{
"name": "react-fundamentals",
"version": "1.0.0",
"description": "Fundamentals of ReactJS",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.0-rc.2",
"react-dom": "^15.0.0-rc.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
devServer: {
port: 7777
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
]
}
}
如果有人能够指导我解决这个问题,那就太好了,因为我无法有效地跟进教程。
更新 我已经在下面发布了答案。