Bagaimana untuk membungkus fail sumber hadapan menggunakan Laravel Mix?

Laravel Mix ialah alat binaan bahagian hadapan yang berkuasa yang boleh membantu anda membungkus dan mengoptimumkan fail sumber bahagian hadapan, seperti JavaScript, CSS, imej, dsb. Ia berasaskan Webpack dan menyediakan API yang ringkas namun berkuasa untuk memudahkan pengurusan dan pembungkusan sumber hadapan.

Dalam artikel ini, kita akan mempelajari cara menggunakan Laravel Mix untuk membungkus fail sumber bahagian hadapan dan mengoptimumkannya ke dalam fail yang ringkas dan mudah digunakan.

Pasang Laravel Mix

Mula-mula, kita perlu memasang Laravel Mix. Anda boleh memasangnya menggunakan npm atau benang.

Jika anda menggunakan npm, jalankan arahan berikut:

npm install laravel-mix --save-dev

Jika anda menggunakan benang, jalankan arahan berikut:

yarn add laravel-mix --dev

Initialize Laravel Mix

Pasang Selepas selesai, buat fail baharu bernama webpack.mix.js dalam direktori akar projek anda. Kemudian, masukkan kod berikut dalam fail:

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

Di sini kami memperkenalkan modul laravel-mix dan menetapkannya kepada pembolehubah campuran.

Seterusnya, kita boleh mula memulakan Laravel Mix menggunakan kaedah yang disediakan dalam pembolehubah campuran.

Sebagai contoh, jika anda ingin membungkus berbilang fail CSS ke dalam satu fail dan menyalinnya ke folder awam/css, anda boleh memasukkan kod berikut:

mix.styles([
    'resources/css/app.css',
    'resources/css/custom.css'
], 'public/css/all.css');

Kod ini akan Pakej aplikasi. css dan custom.css dan simpannya di bawah public/css/all.css.

Untuk contoh lain, jika anda ingin membungkus berbilang fail javascript ke dalam satu fail, anda boleh memasukkan kod berikut:

mix.scripts([
    'resources/js/app.js',
    'resources/js/custom.js'
], 'public/js/all.js');

Kod ini akan membungkus app.js dan custom.js, dan kemudian letakkannya Disimpan di bawah public/js/all.js.

Menyusun LESS atau SASS

Salah satu ciri yang benar-benar menjadikan Laravel Mix menonjol ialah sokongannya untuk Menyusun fail LESS atau SASS.

Jika projek anda menggunakan LESS atau SASS, anda boleh menyusun fail ini dengan mudah menggunakan kaedah mix.less() atau mix.sass().

Sebagai contoh, anda boleh memasukkan kod berikut untuk menyusun fail KURANG dan menyimpannya di bawah public/css:

mix.less('resources/less/app.less', 'public/css');

Kod ini akan menyusun fail app.less dan menyimpan fail CSS yang disusun disimpan di bawah awam/css.

Malah, anda boleh menggunakan kaedah mix.less() atau mix.sass() untuk membungkus berbilang fail, menyusunnya ke dalam satu fail dan menyimpannya di bawah public/css.

Sebagai contoh, anda boleh memasukkan kod berikut untuk membungkus berbilang fail KURANG dan menyimpannya di bawah awam/css:

mix.less([
    'resources/less/app.less',
    'resources/less/custom.less'
], 'public/css/all.css');

Kod ini akan membungkus fail app.less dan custom.less, Kemudian susunkannya ke dalam fail CSS dan simpannya di bawah public/css/all.css.

Kompil fail React

Jika anda menggunakan React dalam projek anda, anda boleh menggunakan kaedah React Laravel Mix untuk menyusunnya.

Sebagai contoh, anda boleh memasukkan kod berikut untuk menyusun fail React dan menyimpannya di bawah public/js:

mix.react('resources/js/app.js', 'public/js');

Kod ini akan menyusun fail app.js dan menyimpan fail JS The yang disusun disimpan di bawah public/js.

Tidak kira bahasa React yang anda gunakan, Laravel Mix menyediakan kaedah kompilasi yang sepadan.

Mengoptimumkan fail sumber bahagian hadapan

Selain membungkus fail sumber bahagian hadapan, Laravel Mix juga menyediakan beberapa kaedah pengoptimuman lain.

Anda boleh menggunakan kaedah mix.version() untuk menambah nombor versi pada fail yang dibungkus. Ini akan membantu anda menyelesaikan isu caching.

Sebagai contoh, anda boleh memasukkan kod berikut untuk menambah nombor versi pada fail yang dibungkus:

mix.version();

Kod ini secara automatik akan menambah nombor versi pada fail yang dibungkus dan menyimpannya dalam campuran - manifest.json.

Selain itu, anda juga boleh menggunakan kaedah mix.setPublicPath() untuk menetapkan laluan awam bagi fail yang dibungkus. Ini akan membantu anda mengurus sumber bahagian hadapan anda dengan lebih baik.

Sebagai contoh, anda boleh memasukkan kod berikut untuk menetapkan laluan awam fail berpakej:

mix.setPublicPath('public/assets');

Kod ini akan menetapkan laluan awam fail berpakej kepada awam/aset.

Kesimpulan

Laravel Mix ialah alat binaan bahagian hadapan yang sangat mudah digunakan dan berkuasa Ia boleh membantu anda membungkus dan mengoptimumkan fail sumber bahagian hadapan untuk memudahkannya guna. Apabila menggunakan Laravel Mix, anda hanya perlu mengetahui beberapa API asas dan anda boleh menyelesaikan kerja pembungkusan fail sumber bahagian hadapan dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk membungkus fail sumber hadapan menggunakan Laravel Mix?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!