Webpacker 找不到 application.js

介绍

Webpacker 是 Rails 5.1 版本开始引入的一个前端打包工具，它通过 Webpack 来打包 JavaScript、CSS、图片等前端资源。但是在使用过程中，有时候会遇到 "Webpacker 找不到 application.js" 的问题，这篇文章就是为了解决这个问题而写的。

解决方案

1. 检查文件目录

首先要检查的是文件目录是否设置正确。在 Rails 5.1 中，Webpacker 所需的文件统一放置在 app/javascript 目录下。在 app/javascript/packs 目录下，会有一个 application.js 文件，如果没有的话，可以通过命令创建：

rails webpacker:install

这个命令会新建 app/javascript/packs 目录，并在其中创建 application.js 文件和 HelloWorld.vue 文件（如果你使用的是 Vue.js）。

2. 检查配置文件

Webpacker 的配置文件位于 config/webpacker.yml，如果里面的配置有误，也会导致 "Webpacker 找不到 application.js" 的错误。

首先，要检查 config/webpacker.yml 文件中的项目名称和路径是否与项目实际情况相符：

# config/webpacker.yml
...
default: &default
  # 确保 app_name 和 path_to_your_application 的值正确
  app_name: your_app_name
  ...
  paths:
    # 确保 source 和 resource 的路径也正确
    source: app/javascript # source 文件夹所在路径
    resource: app/assets # resource 文件夹所在路径
    ...

其次，还要检查 config/webpack/environment.js 文件，确保配置正确：

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

environment.loaders.append('vue', vue)
module.exports = environment

3. 检查 Gemfile

如果以上两个解决方案都无法解决问题，那么最后有可能是因为缺少所需的 gem 包。在 Gemfile 中确保已经添加了 webpacker 以及所需的语言相关的 gem 包（例如 gem 'sass-rails'）。

# Gemfile
gem 'webpacker', '~> 4.0'

结论

以上三种方案中，可能只需要实施其中一项就可以解决问题，但如果三种方案都没能解决这个问题，那么需要对项目的配置和环境进行更为严格的检查，找到问题所在。