rails6でjavascriptを実行しようとするとModule not found: Error: Can't resolve とエラーが出る

rails(--vueでプロジェクトを作成)で既にyarn経由でvue.jsをインストールしているのですが、jQueryも使いたく。
こちらの記事を参考にjQueryを入れました。
app/javascript/packs配下にheader.jsというalertを出すファイルを作り、以下の様に変更しました。

#environment.js
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
/** 追記部分↓　**/
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
module.exports = environment


#application.js
import Rails from "@rails/ujs"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
ActiveStorage.start()

/** 追記部分↓　**/
require("jquery") 
require("header.js") 

#header.js
alert(`hello`);

しかしrails s => http://localhost:3000/を開いてもalert('hello')は出ず、ログを見ると

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'header.js' in '/Users/○○/Desktop/sample_apps/app/javascript/packs'
 @ ./app/javascript/packs/application.js 13:0-24

という様にmoduleが読み込めないというエラーが出ます、どの様な原因でエラーが起こっているか教えていただけると幸いです。
よろしくお願いします。