可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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:
Try updating your module loader to this:
loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loaders: ["react-hot", "babel"], query: { presets: ["es2015", "react"] } } ]
