如何实现Rails视图变更触发Webpack页面自动刷新？

当然可以做到！既然你已经在用Webpacker实现CSS/JS的热重载，完全可以扩展这个能力，让视图文件（erb/slim）变更时自动触发页面刷新，而且不需要额外运行后台进程，也不会重新构建整个JS/CSS包。下面是具体的实现步骤：

修改Webpacker开发环境配置 #

打开config/webpack/development.js，在里面扩展devServer的配置，添加对视图文件的监听。Webpack Dev Server本身支持监听额外的文件，当这些文件变化时，它会发送刷新信号给浏览器，而不会触发重新打包（因为视图文件不属于Webpack的构建依赖）。

示例配置如下：

const { environment } = require('@rails/webpacker')

environment.config.merge({
  devServer: {
    // 保持你已有的hot配置（应该已经开启了，否则CSS/JS热重载不会工作）
    hot: true,
    // 添加视图文件到监听列表
    watchFiles: [
      'app/views/**/*.erb',
      'app/views/**/*.slim',
      // 可以保留你原来监听的CSS/JS文件路径
      'app/assets/stylesheets/**/*',
      'app/javascript/**/*'
    ],
    // 如果你的开发环境用了Docker，需要添加poll配置才能监听到文件变化
    watchOptions: {
      poll: 1000, // 每秒轮询一次
      ignored: /node_modules/ // 忽略node_modules目录，提升性能
    }
  }
})

module.exports = environment

验证效果 #

重启你的Webpack Dev Server（如果之前已经在运行的话），然后修改任意erb或slim视图文件，浏览器应该会自动刷新页面，而且你会发现终端里不会出现重新打包的日志——因为Webpack只是检测到文件变化并发送了刷新指令，没有重新构建JS/CSS包，完全符合你的需求。

额外提示 #

如果你用的是Rails 7+，可能已经迁移到了jsbundling-rails（默认用esbuild或rollup），但思路是类似的：找到对应的开发服务器配置，添加视图文件的监听即可。不过既然你明确提到了Webpacker，上面的配置完全适用。

内容的提问来源于stack exchange，提问作者mbajur