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

【问题标题】：React components not reloading in Phoenix 1.5 with Webpack使用 Webpack 在 Phoenix 1.5 中不重新加载 React 组件
【发布时间】：2021-08-03 23:50:25
【问题描述】：

在带有 Webpack 的 Phoenix 1.5 中，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

【问题讨论】：

标签： reactjs webpack phoenix-framework

【解决方案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  ]

【讨论】：