运行webpack-dev-server时Rails无法识别webpack编译文件问题如何解决

你遇到的404错误核心是Rails服务请求的JS文件路径和实际编译生成的文件路径/托管地址不匹配，按照以下步骤排查解决：

• 第一步：确认服务启动状态
  同时启动Rails服务和webpack-dev-server两个进程，webpack-dev-server需要单独执行./bin/webpack-dev-server命令启动，启动后资源会托管在你配置的3035端口，不会生成实际文件到public/packs目录。
• 第二步：修正自定义输出文件名配置
  你在config/webpack/development.js中自定义的environment.config.output.filename = '[name]-[hash].js'和Webpacker默认的输出路径规则冲突，Webpacker默认会将JS文件输出到packs/js/目录下，你可以二选一修改：
  1. 直接删除这行自定义配置，使用Webpacker默认的路径规则即可
  2. 将配置修改为environment.config.output.filename = 'js/[name]-[hash].js'，对齐默认路径前缀
• 第三步：强制Webpacker识别开发服务器地址
  若启动dev server后Rails还是从3001端口请求资源，可以在config/environments/development.rb中新增配置：

  config.x.webpacker[:dev_server_host] = "http://localhost:3035"
  

  强制让Rails在开发环境从dev server加载资源。
• 第四步：无需dev server的替代方案
  如果你不需要HMR热更新功能，可以不启动webpack-dev-server，你当前config/webpacker.yml的development配置下已经开启了compile: true，Rails会在每次请求时自动编译资源到public/packs目录，直接读取本地文件就不会出现404。
• 最后排查缓存问题
  操作后如果还是报错，执行rm -rf tmp/cache清空缓存，重启两个服务即可。

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