Rails项目无法获取Webpack打包的application JS文件，出现404错误

问题描述 #

为让node-sass在heroku-20栈正常运行，我更新了Rails项目中的webpacker、babel及其他依赖包。目前webpacker可编译启动，但加载页面时，Rails尝试请求/packs/js/application-44959decf6e2f6f8700f.js，而Webpack实际将文件打包在/packs/application-17d61f0126c1ef6152fd.js，导致React JS无法加载，页面仅显示Rails渲染的内容。

环境信息 #

• Ruby on Rails 5.2.8（Ruby 2.7）
• @rails/webpacker 5.3.0
• Webpack 5.1.0
• Node 14.18.1
• React 16.4.1

已尝试方案 #

• npx webpack init
• bundle exec rails webpacker:install
• 复制同版本配置文件，问题仍存在

解决方案 #

1. 修正 webpacker.yml 输出路径配置 #

打开config/webpacker.yml，确保public_output_path设置为packs（不要包含/js子目录），让Webpack输出路径与Rails期望一致：

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs  # 关键：移除/js后缀
  cache_path: tmp/cache/webpacker
  # ... 保留其他原有配置

2. 调整Webpack入口与输出配置 #

检查config/webpack/entry.js或自定义webpack.config.js，确保输出文件名没有js/前缀：

// webpack.config.js 示例
const path = require('path');

module.exports = {
  entry: {
    application: './app/javascript/packs/application.js'
  },
  output: {
    filename: '[name]-[contenthash].js',  // 不要加js/前缀
    path: path.resolve(__dirname, 'public/packs'),
    publicPath: '/packs/'
  }
  // ... 其他配置
};

3. 清理缓存并重新编译 #

执行以下命令彻底清理缓存，重新生成打包文件：

# 删除Webpack缓存目录
rm -rf tmp/cache/webpacker
# 删除旧的打包文件
rm -rf public/packs
# 重新编译
bundle exec rails webpacker:compile

4. 校验视图中的pack引用 #

确保Rails视图中使用javascript_pack_tag时未手动添加路径前缀：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

该标签会自动根据webpacker配置生成正确路径，无需额外添加/js/。

5. 确认依赖版本兼容性 #

检查package.json中webpack-cli版本是否与Webpack 5匹配（Webpack 5需搭配webpack-cli 4.x版本）：

{
  "devDependencies": {
    "@rails/webpacker": "5.3.0",
    "webpack": "5.1.0",
    "webpack-cli": "4.0.0"
    // ... 其他依赖
  }
}

若版本不匹配，安装对应版本：

npm install webpack-cli@4.0.0 --save-dev

额外配置检查建议 #

若以上步骤无效，进一步排查以下文件：

• package.json：确认scripts中的编译命令指向正确的配置文件，例如"webpack": "webpack --config config/webpack.config.js"
• .babelrc：确保Babel配置未干扰打包路径逻辑
• Procfile.dev：确认开发环境启动命令正确，例如web: bundle exec rails s, webpacker: ./bin/webpack-dev-server

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