Webpack Dev Server (webpack-dev-server) Замена горячего модуля (HMR) не работает

Question

Я получил много ответов на StackOverflow & на вопросы GitHub, но я все еще застрял в замене Hot Module в 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"] 
     } 
     } 
    ] 
    } 
} 

Это будет здорово, если кто-то может вести меня по этому вопросу, я не могу идти дальше эффективно с помощью учебника.

Обновление Я разместил ответ ниже.

Answer 1

Попробуйте обновить свой модуль загрузчика к этому:

loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel"], 
     query: { 
      presets: ["es2015", "react"] 
     } 
     } 
    ] 

Answer 2

devServer: { 
inline: true, // you missed this line which will reload the browser 
port : 7777 
} 

Answer 3

Ваш WebPack конфигурации выключен. Посмотрите на react-transform-boilerplate для правильной настройки.

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"] 
    } 
    } 
} 

Answer 4

я понял, решение сам.

Мне нужно запустить мой сервер с помощью sudo. Вместо npm start он должен быть sudo npm start.

Надеюсь, это поможет!

Answer 5

Я использую следующую версию: "webpack": "~ 1.12.14" "webpack-hot-middleware": "^ 2.10.0" "WebPack-DEV-промежуточный слой": "^ 1.6.1"

И я использую следующий код в app.js в моем проекте react.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); 
     }); 
     } 

же код получить горячий заменить на другие сотрудники компьютера, но не всегда, но много раз горячая замена не будет работать на моем компьютере.