Webpack 2 + React 热加载器不工作
Webpack 2 + React Hot Loader Not Working
我正在尝试让 Webpack 2 + React Hot Loader 正常工作,但它似乎无法热重载。它可以正确呈现网页,但任何时候我对 "App.js" 文件进行任何更改时,它都不会执行任何操作。
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"
}
}
我正在 运行通过带有 --hot 和 --inline 标志的 CLI 设置 webpack-dev-server。
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),但其中 none 似乎有效。
在你的 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
中查看更详细的示例
编辑:
根据文档示例,您需要在 accept
的回调中调用 render
。
或许也可以看看 webpack config。
我正在尝试让 Webpack 2 + React Hot Loader 正常工作,但它似乎无法热重载。它可以正确呈现网页,但任何时候我对 "App.js" 文件进行任何更改时,它都不会执行任何操作。
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"
}
}
我正在 运行通过带有 --hot 和 --inline 标志的 CLI 设置 webpack-dev-server。
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),但其中 none 似乎有效。
在你的 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
中查看更详细的示例编辑:
根据文档示例,您需要在 accept
的回调中调用 render
。
或许也可以看看 webpack config。