【Laravel8】Laravel-Mixでjavascriptファイルを取り込む方法

【Laravel8】Laravel-Mixでjavascriptファイルを取り込む方法

前提

Laravel 8.4
webpack-cli 4.9
Laravel-mix 5.1

・bladeにjsを取り込みたい
・bladeにscript直書きしたくない
・他にも方法があるけど、今回はMixを使って軽量化します。

手順

1.VS codeでCtrl + P ⇒ webpack.mix.jsと入力し、ファイルを開く

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

↑こちらデフォルト
mix.js('resources/js/app.js', 'public/js')
⇒ resources/js/app.js を軽量化して、public/jsに配置するということです。

2. 一行書き足します。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/assets/function.js', 'public/js') // ここ
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

function.jsの部分は各自jsファイルの名前で置き換えてください。

3.resources/js/assetsフォルダを作成 ⇒ その中にjsファイルを入れる

4.bladeでjavascriptを読み込む

app.blade.php

    <script defer src="{{ mix('js/function.js') }}"></script>
</head>

5.ビルドする

Terminal

    npm run dev

成功するとこのように表示される

Terminal

    ✔ Compiled Successfully in 5232ms

こちらの場合、コマンド実行時・それ以降にCtrl + S(保存)すると自動でビルドされます。

Terminal

    npm run watch

6.javascriptの動作を確認

わたしの環境ではうまくいきました。
うまくいかない場合、package.jsonのscriptsを確認してみてください。

番外編

app.js一つにまとめる方法

app.js

import './assets/function.js'
import './assets/param.js'
import './assets/button.js'

app.blade.php

    <script defer src="{{ mix('js/app.js') }}"></script>
</head>

自動ロードを設定

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/assets/function.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync('http://localhost:8000''); // ここ

URLの部分は各自置き換えてください

Doc

Laravel 8.x アセットのコンパイル（Mix）