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

Question

React 组件的热重载似乎在带有 Webpack 的 Phoenix 1.5 中不起作用。我创建了这个示例应用程序来说明我遇到的问题：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  ]

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

React components not reloading in Phoenix 1.5 with Webpack

reactjs

webpack

phoenix-framework