我在使用react-hot webpack loader时遇到了一些问题。
当我加载页面时,如预期的那样,会出现以下内容:
[HMR] 等待来自WDS的更新信号...
[WDS] 启用热模块替换。
但是当我保存更改时,页面会自动刷新浏览器(而不是进行HMR替换)。
//webpack.config.js
{
entry: {
client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port
app: "./HelloWorld.tsx"
},
devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].entry.js'
},
module: {
loaders: [
{
test: /\.ts(x?)$/,
loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader']
}
]
},
devServer: {
contentBase: "./dist",
port:8786
},
plugins: [
new webpack.NoErrorsPlugin()
]
}
命令:webpack-dev-server --hot --inline
有趣的是,如果我使用babel-preset-react-hmre
,一切都按预期工作。(但我并不想使用它,因为它似乎比正确的react-hot loader支持要少。)
client: 'webpack-dev-server/client?http://localhost:8786'
,不确定它是否有帮助,但当使用开发服务器的这些选项时,不应添加它。 - Dominicreact-hot
应该就可以了。我也遇到了同样的问题(刷新而不是热替换),但请注意,这些热加载器都不支持无状态的 React 组件。如果还不行的话,你可能想试试 https://github.com/gaearon/react-transform-hmr。 - Dominic