webpackにコンパイルやバンドルしたいものを記述する
webpack.mix.js
/*
mix.js(出力元、出力先（出力名は元のが引き継がれる）
app.jsにまとめたい場合、resources/js/app.jsにて import "hoge.js"を記載
*/
//この場合、指定したjsはそれぞれコンパイルされ、public下にそれぞれ出力される。
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/dropify.js', 'public/js')
.js('resources/js/dropify.min.js', 'public/js')
//この場合、指定したcssはそれぞれコンパイルされ、public下にall.cssとしてまとめて出力される。
.styles([
'resources/css/AAAA.css',
'resources/css/AAAA_phone.css'
], 'public/css/all.css')
.autoload({
"jquery": ['$', 'window.jQuery']
})
.postCss('resources/css/app.css', 'public/css', [
//
]);
アセットコンパイルする
npm run dev を実行します。
npm run dev
適宜読み込み、使用する
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
assetは、public以下のファイルを参照する
<link rel="stylesheet" href="{{ asset('/css/all.css') }}">
</head>
-
-
-
<script src="{{ asset('/js/dropify.js') }}"></script>
<script src="{{ asset('/js/dropify.min.js') }}"></script>
<script src="{{ asset('/js/app.js') }}"></script>