###【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の部分は各自置き換えてください