我在让 React-hot Webpack 加载器正常工作时遇到了一些麻烦。
当我加载页面时,我会得到以下内容,正如我所期望的:
[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
,一切都会按预期进行。 (但是我真的不想使用它,因为它似乎比正确的反应热加载器支持更少)。
我刚刚遇到了这个问题。有几件事:
为了帮助调试您的特定问题,请尝试启用“保留日志”(在 Chrome 开发工具中)。这将在页面刷新时保留控制台日志,因此您至少能够在触发刷新之前看到 webpack-dev-server 正在记录的任何消息。
就我而言,webpack-dev-server 令人耳目一新,因为我没有在入口 js 文件中选择加入 HMR。将以下行添加到文件解决了问题:
// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()
有关
module.hot
API 的详细信息,webpack HMR 文档 非常有帮助。