Web Pack Dev Server (webpack-dev-server) Горячая замена модулей (HMR) не работает
Я получил много ответов на вопросы о Stackru и GitHub, но я все еще застрял в Горячей замене модулей в 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, где все работало нормально.
Ниже приведены мои файлы 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"]
}
}
]
}
}
Было бы здорово, если бы кто-то смог мне помочь в решении этой проблемы, так как я не могу продолжать эффективно продолжать учебник.
Обновление я разместил ответ ниже.
5 ответов
Я сам разобрался с решением.
Я должен запустить свой сервер с sudo, Вместо npm start, должно быть sudo npm start,
Надеюсь, поможет!
Конфигурация вашего веб-пакета отключена. Посмотрите на шаблон "Реакция-преобразование-шаблон" для правильной настройки.
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
// or devtool: 'eval' to debug issues with compiled output:
devtool: 'cheap-module-eval-source-map',
entry: [
// necessary for hot reloading with IE:
'eventsource-polyfill',
// listen to code updates emitted by hot middleware:
'webpack-hot-middleware/client',
// your code:
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}]
}
};
.babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
devServer: {
inline: true, // you missed this line which will reload the browser
port : 7777
}
Я только что удалил node_modules папка и package-lock.jsonфайл. А затем повторно запуститьnpm install. Это сработало!
Я использую следующую версию: "webpack": "~1.12.14" "webpack-hot-middleware": "^2.10.0" "webpack-dev-middleware": "^1.6.1"
И я использую следующий код в app.js в моем проекте Reaction.js.
var webpackconfig =require('./webpack.config');
var webpack = require('webpack');
var webpackMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var http = require('http');
var express = require('express');
var app = require('express')();
var isDeveloping = process.env.NODE_ENV != 'production';
// var isDeveloping = false;
console.log("IS developing ",isDeveloping);
var serverConfig = require('./globalconfig.js')
var serverPort = serverConfig.port
app.get('/css/bootstrap.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'public/lib/bootstrap/css/bootstrap.min.css'));
});
// swaggerRouter configuration
var options = {
controllers: './controllers',
useStubs: process.env.NODE_ENV === 'development' ? true : false // Conditionally turn on stubs (mock mode)
}
var config = {
appRoot: __dirname // required config
}
// Start the server
app.listen(serverPort, function () {
console.log('Your server is listening * on port %d (http://localhost:%d)', serverPort, serverPort);
});
if (isDeveloping) {
app.use('/node_modules', express.static('/node_modules'));
app.use(express.static('src/web-ui/public/'));
app.use(express.static('src/web-ui/public/'));
const compiler = webpack(webpackconfig);
const middleware = webpackMiddleware(compiler,{
publicPath: webpackconfig.output.publicPath,
headers: {
"Cache-Control" : "public, max-age=604800"
},
constentBase:'dist',
stats:{
color:true,
hash:false,
timings:true,
chunks:false,
chunkModules:false,
modules:false
}
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));
app.get('/',function response(req,res){
res.write(middleware.fileSystem.readFileSync(path.join(_dirname,'dist/index.html')));
res.end();
});
} else {
app.use('/node_modules', express.static('/node_modules'));
app.use(express.static('dist/public'));
app.use(express.static('dist'));
app.get('/', function response(req, res,next) {
console.log("Processing req");
var entryFile = path.join(__dirname, 'dist', 'index.html');
console.log("Hitting the Root",entryFile);
res.sendFile(entryFile);
});
}
Один и тот же код горячо заменяется на компьютере других сотрудников, но не всегда, но много раз горячая замена не будет работать на моем компьютере.
Попробуйте обновить загрузчик вашего модуля до этого:
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel"],
query: {
presets: ["es2015", "react"]
}
}
]