確認環境:
Windows10、Laravel 7.30.4
フロントエンドにVue.js、バックエンドにLaravel という環境が使いやすい
Laravelはphpのフレームワーク
JavaScriptやCSSをがっつり使いたいなら、Laravel Mixを使う
Laravel MixはWebpackをベースとしている
Laravel Mixを使うには、Node.jsとnpmをあらかじめインストールしておく
webpack.mix.js を編集する
デフォルトは以下
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
CSSを使いたい場合
mix.styles([ 'public/css/vendor/normalize.css', 'public/css/vendor/videojs.css' ], 'public/css/all.css');
JavaScriptを使いたい場合
mix.js('resources/js/app.js', 'public/js');
Laravel Mixを実行する
// 全タスク実行 npm run dev // 全タスク実行を実行し、出力を圧縮 npm run production
コンパイルされたjs、cssが
/public/js、public/css に出力される
このファイルをバンドルファイルと呼ぶ
webpackが、複数のモジュールを1つにまとめたファイルを出力する(モジュールバンドラ)