问题
I have gone through many answers on StackOverflow & on GitHub issues as well but, I am still stuck in Hot Module Replacement in Webpack. I am using npm start to run my server with webpack-dev-server --hot --inline. I am trying to change code in my React component, but nothing happens in the browser.
I am using Google Chrome Version 49.0.2623.87 (64-bit) on Ubuntu 14.04LTS.
In my browser console, I am getting log messages as
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
But, no hot/live reload is happening. Nothing gets displayed when I change code in my React component file. I was following first video of this tutorial, Egghead.io/ReactFundamentals where everything worked fine.
Following are my package.json & webpack.config.js files.
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"]
}
}
]
}
}
It will be great if someone can guide me through this issue as I am not able to proceed further efficiently with the tutorial.
Update I have posted the answer below.
回答1:
I figured out the solution myself.
I have to run my server with sudo. Instead of npm start, it has to be sudo npm start.
Hope it helps!
回答2:
devServer: {
inline: true, // you missed this line which will reload the browser
port : 7777
}
回答3:
Your webpack config is off. Take a look at react-transform-boilerplate for a correct setup.
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"]
}
}
}
回答4:
I use the following version : "webpack": "~1.12.14" "webpack-hot-middleware": "^2.10.0" "webpack-dev-middleware": "^1.6.1"
And I use following code in app.js in my react.js project.
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);
});
}
Same code get hot replaced on other employees computer,but not always,but many times hot replace won't work in my computer.
回答5:
I just deleted node_modules folder and package-lock.json file. And then re-run npm install. It worked!
回答6:
Try updating your module loader to this:
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel"],
query: {
presets: ["es2015", "react"]
}
}
]
来源：https://stackoverflow.com/questions/36212249/webpack-dev-server-webpack-dev-server-hot-module-replacement-hmr-not-working