0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-07

###【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ファイルを入れる

Code_jbjOs6L3ZM.png

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)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?