Webpack 2 + React Hot Loader無法正常工作

我正在嘗試讓Webpack 2 + React Hot Loader正常工作，但似乎並未重新加載。它正確呈現網頁，但是隨時對「App.js」文件進行任何更改，它都不會執行任何操作。Webpack 2 + React Hot Loader無法正常工作

webpack.config.json

var path = require('path'); 
var webpack = require('webpack'); 
module.exports = { 
    entry: { 
    'app': [ 
     'react-hot-loader/patch', 
     path.join(__dirname, 'src/main.js') 
    ] 
    }, 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     } 
    ] 
    } 
};

.babelrc

{ 
    "presets": [ 
    ["env", {"modules": false}], 
    "react" 
    ], 
    "plugins": [ 
    "transform-object-rest-spread" 
    ] 
}

的package.json

{ 
    "main": "main.js", 
    "scripts": { 
    "dev": "webpack-dev-server --inline --hot" 
    }, 
    "dependencies": { 
    "express": "^4.15.2", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-plugin-transform-object-rest-spread": "^6.23.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-env": "^1.4.0", 
    "babel-preset-react": "^6.24.1", 
    "react-hot-loader": "next", 
    "webpack": "^2.4.1", 
    "webpack-dev-server": "^2.4.4" 
    } 
}

我跑webpack-dev-server通過CLI使用--hot和--inline標誌。

main.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 

import App from './containers/App' 

const render = Component => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    document.getElementById('root') 
) 
} 

render(App) 

if(module.hot) { 
    module.hot.accept(); 
}

App.js

import React, { Component } from 'react' 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <div className="container"> 
      <h1>Testing</h1> 
     </div> 
     </div> 
    ) 
    } 
}

因此，爲了測試它，我要跑yarn dev和服務器將啓動。一切編譯和webpack將輸出webpack: Compiled sucessfully。但是，對App.js所做的任何更改都不會重新加載網頁。在網頁本身控制檯只輸出這樣的：

[HMR] Waiting for update signal from WDS... 
bundle.js:15580 [WDS] Hot Module Replacement enabled.

我想在這裏（https://github.com/webpack/webpack-dev-server/issues/100）中列出的各種方法，但沒有人似乎工作。

來源

2017-04-25 DeadCake

你的代碼在哪個平臺/環境上運行？我的意思是操作系統。 –

如果你正在使用Linux操作系統，請看看這篇文章： https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers –

我剛剛在我的Mac上測試過它，一切正常。試圖事先在Windows + Ubuntu Bash上開發。我會檢查鏈接，看看它是否會幫助我的Windows機器。 – DeadCake

您main.js嘗試改變這一點：

if(module.hot) { 
    module.hot.accept(); 
}

這樣：

if (module.hot) { 
    // Enable Webpack hot module replacement for Component 
    module.hot.accept('./containers/App',() => { 
     render(App); 
    }); 
    }

您可以在docs

編輯看到一個更詳細的例子：
按照文檔例如，您需要撥打render撥打accept 。

也許看看webpack config以及。

來源

2017-04-25 07:59:01

我實際上並沒有使用redux，因爲我試圖獲得熱重新安裝的設置，所以我不知道是什麼store.replaceReducer會做... – DeadCake

是啊對不起，我從我們的項目中粘貼它，忘記刪除這條線。我更新了我的答案，並附有特定文檔的鏈接 –

接受此答案以解決問題。 – DeadCake

Webpack 2 + React Hot Loader無法正常工作

回答

相關問題