使用Webpack在Phoenix 1.5中重新加载React组件

Question

在Phoenix 1.5和Webpack中，React组件的热重新加载似乎不起作用。我创建了这个示例应用程序来说明我遇到的问题：https://github.com/johnnyicon/phx15-react-babel-tailwindcss-postcss

对./assets/js/react/App.js的更改不会自动重新加载。刷新页面也不反映更改。我必须重新启动Phoenix服务器才能显示更改。

我可以编辑其他文件，比如模板文件(*.html.eex(，它们可以很好地重新加载。然而，有趣的是，即使其他文件重新加载，React组件仍然不会更新。

有什么想法可以使用React组件进行热重新加载吗？

PS。大致遵循本教程在Phoenix 1.5项目中设置React：https://betterprogramming.pub/using-react-17-with-phoenix-1-5-1b445526c739

Answer 1

简单的解决方案。开发框架预期行为的这种突破是由于升级到Webpack 1.5。为了再次进行热重新加载，您需要将--watch标志添加到dev.exs中的watchers条目中。标志从v1.4更改为1.5。

下面是一个例子(第11行和第12行(：

1 config :nexus, App.Endpoint,
2  http: [port: 4000],
3  debug_errors: true,
4  code_reloader: true,
5  check_origin: false,
6  watchers: [
7    node: [
8      "node_modules/webpack/bin/webpack.js",
9      "--mode",
10      "development",
11      "--watch",  # ADD THIS
12      "--watch-options-stdin", # THIS FLAG ALSO CHANGED IN 1.5
13      cd: Path.expand("../assets", __DIR__)
14    ]
15  ]