Я прошел много ответов на StackOverflow и на вопросы GitHub, но, я все еще застрял в Hot Module Replacement в Webpack. Я использую npm start
для запуска моего сервера с помощью webpack-dev-server --hot --inline
. Я пытаюсь изменить код в компоненте React, но ничего не происходит в браузере.
Я использую Google Chrome версии 49.0.2623.87 (64-разрядная версия) на Ubuntu 14.04LTS.
В моем браузере console
я получаю сообщения журнала как
[HMR] Ожидание сигнала обновления от WDS...
[WDS] включена горячая замена модуля.
Но никакой горячей/живой перезагрузки не происходит. При изменении кода в файле компонента React ничего не отображается. Я следил за первым видео этого урока, Egghead.io/ReactFundamentals, где все работало нормально.
Ниже приведены файлы моего пакета .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"]
}
}
]
}
}
Будет здорово, если кто-нибудь сможет мне помочь в этом вопросе, так как я не могу более эффективно продвигаться в этом учебнике.
Обновление. Я разместил ответ ниже.