Pembangunan Laravel: Bagaimana untuk membungkus sumber hadapan menggunakan Laravel Mix dan Webpack?

Laravel ialah rangka kerja aplikasi web PHP yang popular yang terkenal dengan kesederhanaan, keanggunan dan kecekapannya. Dalam proses pembangunan Laravel, pengurusan dan pembungkusan sumber bahagian hadapan juga merupakan bahagian yang sangat penting. Dalam artikel ini, saya akan memperkenalkan cara menggunakan Laravel Mix dan Webpack untuk mengurus dan membungkus sumber bahagian hadapan.

1. Apakah itu Laravel Mix dan Webpack

Laravel Mix ialah API mudah yang dicipta oleh pasukan pembangunan Laravel yang menggunakan Webpack untuk menyusun dan membungkus sumber bahagian hadapan. Ia boleh membantu pembangun menggunakan Webpack dengan mudah untuk menyusun sumber hadapan seperti ES2015, Less, Sass dan Stylus. Pada masa yang sama, LaravelMix juga menyediakan beberapa pemalam dan pilihan Webpack bahagian hadapan biasa, seperti penyegaran automatik, pengekstrakan CSS, dsb.

Webpack ialah alat pembungkusan modul popular yang boleh membungkus pelbagai jenis sumber bahagian hadapan, seperti JavaScript, CSS, imej, dll., ke dalam satu atau lebih fail JavaScript untuk pemuatan penyemak imbas. Menggunakan Webpack boleh sangat memudahkan pembangunan dan penyelenggaraan bahagian hadapan.

2. Pasang dan konfigurasikan Laravel Mix

1 Pasang Node.js dan NPM

Sebelum anda mula menggunakan Laravel Mix, anda perlu memastikan ia dipasang pada anda. komputer Node.js dan NPM. Anda boleh memuat turun dan memasang Node.js daripada tapak web rasmi Node.js. Selepas memasang Node.js, NPM juga akan dipasang.

2. Pasang Laravel Mix

Memasang Laravel Mix dalam projek Laravel anda adalah sangat mudah. Anda boleh memasang Laravel Mix menggunakan NPM:

npm install --save-dev laravel-mix

Selepas pemasangan selesai, anda perlu membuat beberapa konfigurasi asas dalam fail webpack.mix.js. Dalam direktori akar projek Laravel anda, cipta fail webpack.mix.js dengan arahan berikut:

touch webpack.mix.js

Kemudian, tambahkan kandungan berikut pada webpack.mix.js:

let mix = require('laravel-mix');
 
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

di atas Kod tersebut memberitahu Laravel Mix untuk menyusun fail resources/js/app.js ke dalam fail public/js/app.js dan fail resources/sass/app.scss ke dalam fail public/css/app.css.

3. Jalankan Laravel Mix

Selepas anda melengkapkan konfigurasi webpack.mix.js, anda boleh menjalankan Laravel Mix melalui arahan berikut:

npm run dev

Arahan ini akan Anda sumber front-end akan disusun dan fail yang disusun akan dijana dalam direktori awam. Jika anda ingin menjalankan Laravel Mix dalam persekitaran pengeluaran, anda boleh menggunakan arahan berikut:

npm run prod

Perintah ini akan melakukan penyusunan dan pemampatan yang lebih ketat bagi sumber bahagian hadapan anda untuk memastikan tapak web anda boleh memuatkan dengan lebih pantas.

3. Gunakan Laravel Mix dan Webpack untuk membungkus sumber bahagian hadapan

Kini, kami bersedia untuk menggunakan Laravel Mix dan Webpack untuk membungkus sumber bahagian hadapan. Seterusnya, kami akan memperkenalkan secara terperinci cara menggunakan Laravel Mix dan Webpack untuk membungkus sumber bahagian hadapan anda.

1. Tulis sumber bahagian hadapan

Sebelum menggunakan Laravel Mix, anda perlu menulis beberapa sumber bahagian hadapan, seperti JavaScript, CSS, imej, dll. Anda boleh menyimpan sumber ini dalam direktori sumber.

2. Ubah suai fail konfigurasi webpack.mix.js

Selepas menulis sumber bahagian hadapan, anda perlu memberitahu Laravel Mix cara membungkus sumber ini dalam konfigurasi webpack.mix.js fail. Dalam fail ini, anda boleh menggunakan API Campuran Laravel untuk menyusun dan membungkus sumber bahagian hadapan.

Sebagai contoh, jika anda ingin membungkus app.js dan app.scss ke dalam app.js dan app.css dan menyimpannya dalam direktori awam, anda boleh mengkonfigurasi webpack.mix.js seperti ini:

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Kod di atas memberitahu Laravel Mix untuk menyusun fail resources/js/app.js ke dalam fail public/js/app.js dan fail resources/sass/app.scss ke dalam public/css/app fail.

3. Jalankan Laravel Mix

Selepas anda melengkapkan konfigurasi webpack.mix.js, anda boleh menjalankan Laravel Mix melalui arahan berikut:

npm run dev

Arahan ini akan Anda sumber front-end akan disusun dan fail yang disusun akan dijana dalam direktori awam. Jika anda ingin menjalankan Laravel Mix dalam persekitaran pengeluaran, anda boleh menggunakan arahan berikut:

npm run prod

Perintah ini akan melakukan penyusunan dan pemampatan yang lebih ketat bagi sumber bahagian hadapan anda untuk memastikan tapak web anda boleh memuatkan dengan lebih pantas.

4. Ringkasan

Membungkus sumber hadapan menggunakan Laravel Mix dan Webpack adalah sangat mudah. Anda hanya perlu menulis beberapa sumber bahagian hadapan dan mengkonfigurasi Laravel Mix dalam fail webpack.mix.js. Semasa proses pembangunan, terutamanya apabila menggunakan beberapa sumber bahagian hadapan yang lebih kompleks, Laravel Mix dan Webpack boleh menjimatkan banyak masa dan tenaga anda.

Saya harap artikel ini dapat membantu anda menggunakan Laravel Mix dan Webpack dengan lebih baik untuk mengurus dan membungkus sumber bahagian hadapan.

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