Laravel css không hoạt động trên sản xuất

Ngày nay, chúng ta có rất nhiều công cụ và công nghệ hỗ trợ phát triển web. Các bộ tiền xử lý CSS như SASS hoặc LESS giúp viết CSS dễ dàng và mạnh mẽ hơn bao giờ hết. JavaScript tiếp tục phát triển với các tính năng mới được bổ sung hàng năm. Nhưng những lựa chọn này có thể đi kèm với một chi phí. khả năng tương thích

Các bộ tiền xử lý CSS không chắc sẽ sớm có hỗ trợ gốc trong trình duyệt web, trong khi JavaScript bổ sung các tính năng mới nhanh hơn chúng ta có thể triển khai chúng vào trình duyệt web. Điều đó có nghĩa là các nhà phát triển cần biên dịch [hoặc dịch mã] mã này thành thứ gì đó hoạt động trên các trình duyệt. Và điều này đi kèm với một bức tường lớn để leo lên

Vâng, tôi đang nói về cấu hình webpack

May mắn thay, có một công cụ có thể làm điều này dễ dàng. Hãy để tôi giới thiệu với bạn về Laravel Mix.  

Hỗn hợp Laravel

Có ai nhớ lần đầu tiên họ cố gắng làm cho webpack hoạt động không? . Và điều đó đã khiến một phần lớn các nhà phát triển web từ chối sử dụng nó. Nhưng với Laravel Mix, về cơ bản là một trình bao bọc webpack, mọi thứ chỉ gói gọn trong hai dòng cấu hình

Đúng như tên gọi của nó, Laravel Mix là một phần của một trong những PHP framework phổ biến nhất. ấu trùng. Nhưng Laravel Mix cũng có thể được sử dụng trên các dự án độc lập, cũng như các chủ đề WordPress

Trước đó chúng tôi đã đề cập đến Sage 9, một chủ đề khởi đầu với webpack được cấu hình sẵn. Xem các liên kết dưới đây để biết thêm chi tiết

• Hiện đại hóa phát triển WordPress với Sage 9 – Phần 1
• Hiện đại hóa phát triển WordPress với Sage 9 – Phần 2
• Hiện đại hóa phát triển WordPress với Sage 9 – Phần 3

Yêu cầu đối với Laravel Mix là tối thiểu. Bạn chỉ cần nút. js, một trong những trình quản lý gói tốt [như

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

8 hoặc

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

9] đã được cài đặt và kiến ​​thức cơ bản về sử dụng dòng lệnh

Đối với những người sử dụng Windows, việc cài đặt một công cụ dòng lệnh có thể là một thách thức. Hình ảnh mơ hồ như VVV hoặc Homestead có thể giúp ích rất nhiều

Cài đặt

Mở dấu nhắc lệnh hoặc Terminal, chuyển đến thư mục dự án của bạn và cài đặt

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

0 qua

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

8 hoặc

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

9. Chúng tôi cũng khuyên bạn nên cài đặt gói

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

3. Gói này sẽ xử lý việc sử dụng đa môi trường, đặc biệt là trên Windows

// For npm users
$ npm install laravel-mix cross-env --save-dev

// For Yarn users
$ yarn add laravel-mix cross-env --dev

Phiên bản mới nhất của

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

3 yêu cầu Nút 10. Nếu bạn đang sử dụng Nút 8, thay vào đó, bạn cần cài đặt

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

5

Cá nhân tôi gặp sự cố với

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

6 mà tôi đã cài đặt trên toàn cầu và hoạt động tốt với các dự án khác. Nếu bạn cũng gặp sự cố này, chỉ cần cài đặt

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

6 trong dự án của bạn

Sau đó sao chép tệp cấu hình từ

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

8 vào thư mục gốc dự án của bạn

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

Bây giờ, hãy mở tệp

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

9 và thêm các cấu hình này vào tệp, ngay trước vòng tay xoăn cuối cùng hoặc thêm chúng vào trong phần

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

0 nếu tệp đã có

"scripts": {
    "build": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "build:production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Vậy, những lệnh đó là gì?

Phần

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

0 trong

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

2 giống như một phím tắt dòng lệnh. Nếu bạn chạy

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

3 hoặc

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

4, trình quản lý gói sẽ chạy lệnh dài [không ai muốn nhớ] được liên kết với từ khóa. Trong trường hợp này, hãy sử dụng các lệnh để xây dựng nội dung cho cục bộ hoặc sản xuất

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

Sự khác biệt chính giữa

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

5 và

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

6 là bản đồ đầu tiên sẽ chứa một bản đồ nguồn, bản đồ này có thể cho bạn biết vị trí của phần CSS hoặc JS hiện tại. Cái sau sẽ không có cái này và đầu ra cũng được thu nhỏ

Bản dựng phát triển chứa bản đồ nguồn

Bản dựng sản xuất không chứa bản đồ nguồn

Bạn cũng có thể yêu cầu webpack xem các tệp thay đổi và tự động biên dịch lại chúng bằng cách thêm đối số

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

7

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

Có,

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

8 cần thêm đối số

// for npm users
$ npm run build
$ npm run build:production

// for Yarn users
$ yarn build
$ yarn build:production

9 trống để hoạt động

Webpack đang theo dõi các thay đổi của tệp

Tại thời điểm này, Laravel Mix đã sẵn sàng để sử dụng. Các tệp CSS và JS mặc định lần lượt là

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

0 và

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

1. Họ sẽ đặt các tệp đã biên dịch vào thư mục

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

2. Nhưng chúng tôi sẽ điều chỉnh một chút để đảm bảo cấu trúc của tệp phù hợp với nhu cầu của bạn

Thay đổi cấu trúc thư mục

Như chúng tôi đã đề cập, thư mục mặc định cho các tệp JavaScript và SCSS là

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

3 và thư mục đầu ra mặc định là

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

2. Nhưng chúng ta có thể dễ dàng thay đổi điều này. Ví dụ: chúng tôi sẽ thay đổi thư mục nguồn và tệp thành

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

5 cho biểu định kiểu và

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

6. Đầu ra sẽ lần lượt là

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

7 và

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

8

Mở tệp

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

9 chúng tôi đã sao chép ở bước trước. Sẽ có rất nhiều cấu hình bên trong tệp nhưng hầu hết chúng đều được chú thích. Nó thực sự chỉ cần hai dòng sau để làm việc

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

Dòng thứ hai là nơi bạn có thể chỉ định tệp mục nhập tài nguyên và vị trí của các tài nguyên đã biên dịch thông qua phương thức tương ứng với loại tài nguyên

Ở bước này, chúng tôi khuyên bạn nên bắt đầu với

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

0. Đây sẽ là đường dẫn gốc của bạn cho nội dung đã biên dịch cũng như các tài nguyên khác

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

Sau đó, bạn vẫn cho Laravel Mix biết về các tệp mục nhập tài nguyên của bạn và vị trí đặt chúng so với

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

0

Ví dụ: nếu bạn muốn biên dịch một tệp JavaScript có vị trí tại

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

6, hãy đặt tệp đã biên dịch vào

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

8 và một tệp SCSS có vị trí từ

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

5 đến

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

5. Bạn có thể cập nhật cài đặt thành một cái gì đó như thế này

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

Nếu bạn có nhiều tệp mục nhập, bạn cũng có thể thêm chúng vào cấu hình

let mix = require['laravel-mix']; 

mix.setPublicPath['./dist'];

mix
 .js['assets/scripts/main.js', 'dist/scripts']
 .js['assets/scripts/inner-page.js', 'dist/scripts']
 .sass['assets/styles/main.scss', 'dist/styles'];

Và đó là tất cả. Bây giờ bạn có thể chạy tập lệnh xây dựng để biên dịch tài nguyên

Để sử dụng tệp đã biên dịch, chỉ cần gọi thông thường qua thẻ

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

6 và thẻ

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

7

Hoặc nếu dự án là một chủ đề WordPress, bạn có thể liệt kê chúng giống như các nội dung khác của bạn

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

0

Và đừng quên thêm thư mục

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

2 vào tệp

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

9 của bạn

Như đã đề cập ở trên, file này cũng chứa rất nhiều cấu hình, nhưng chúng đã được chú thích. Các cài đặt đó sẽ cho phép bạn biên dịch các loại tài nguyên khác, chẳng hạn như CoffeeScript, TypeScript, LESS, Stylus, cũng như thay đổi các cài đặt khác như chính webpack hoặc BrowserSync

Sử dụng jQuery bên ngoài

Các CMS như WordPress thường được vận chuyển với jQuery tích hợp sẵn. Mặc dù bạn luôn có thể cài đặt một jQuery khác qua

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

8, nhưng bạn nên sử dụng jQuery tích hợp sẵn để duy trì khả năng tương thích và loại bỏ một số byte không cần thiết

Laravel Mix cho phép bạn điều chỉnh các cài đặt khác, bao gồm webpack, bằng cách chuyển cấu hình vào phương thức

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

1. Với khóa

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

2, bạn có thể biết cuộc gọi thư viện nào sẽ sử dụng cuộc gọi bên ngoài thay thế [cuộc gọi bạn đã gọi qua thẻ

let mix = require['laravel-mix'];

mix.js['src/app.js', 'dist/'].sass['src/app.scss', 'dist/'];

6]

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

1

Sau đó, trong tệp JavaScript của bạn, bạn chỉ cần khai báo

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

4 và nó đã sẵn sàng để sử dụng

Bootstrap qua npm

Bootstrap vẫn phổ biến để phát triển web. Thông thường, chúng tôi sẽ chỉ bao gồm CSS và JavaScript đã biên dịch cho Bootstrap, nhưng vì chúng tôi hiện đang sử dụng trình quản lý gói, tại sao chúng tôi không cài đặt Bootstrap thông qua trình quản lý gói và phát huy hết tiềm năng của nó?

Hãy cài đặt các gói yêu cầu thông qua

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

8 hoặc

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

9

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

2

Bạn cũng sẽ cần cài đặt

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

7 nếu bạn không sử dụng jQuery bên ngoài. Sau đó nhập tệp Bootstrap JavaScript và SCSS vào tệp của bạn

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

3

Đối với tệp SCSS, trước tiên bạn cần tạo một tệp khác. Hãy cùng nói nào.

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

8 và

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

9 tệp này trước khi bạn nhập Bootstrap SCSS thực tế

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

4

Ok, đây là nơi điều kỳ diệu và cái hố thỏ bắt đầu. Bootstrap sẽ cho phép bạn ghi đè một số cấu hình trước khi xây dựng tệp CSS thực, bằng cách ghi đè một số biến SCSS

Ví dụ: màu chính của Bootstrap là màu xanh lam hoặc chính xác là ______ 45 ______ 0. Nếu bạn muốn thay đổi màu xanh chính mặc định thành

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

1, bạn chỉ cần ghi đè biến

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

2 trong

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

3

Bạn thậm chí có thể thêm các điểm ngắt màn hình mới hoặc thay đổi độ rộng màn hình cho từng điểm ngắt thông qua biến

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

4

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

5

Và đây là phần lỗ thỏ. bạn có thể tìm thấy tất cả các biến có thể ghi đè trong

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

5. Bất kỳ biến nào có khai báo

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

6 đều có thể ghi đè

Ghi đè cài đặt Bootstrap là một giải pháp lý tưởng hơn để ghi đè thủ công các lớp Bootstrap qua CSS

Tối ưu hình ảnh với imagemin

Mặc dù Laravel Mix đã cung cấp rất nhiều tính năng, nhưng bạn cũng có thể bổ sung thêm thông qua tiện ích mở rộng. [Danh sách đầy đủ nằm ở đây]. Chúng tôi sẽ sử dụng tiện ích mở rộng

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

7 để tối ưu hóa hình ảnh làm ví dụ

Đầu tiên, đặt tất cả hình ảnh của bạn vào thư mục

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

8. Các tệp được tối ưu hóa sẽ ở số

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

9. Điều này là để duy trì cấu trúc thư mục nên sẽ không có vấn đề gì khi bạn gọi một hình ảnh từ tệp SCSS

Bây giờ hãy cài đặt tiện ích mở rộng

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

6

Sau đó mở lại

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

9 và thêm cấu hình này

$ cp node_modules/laravel-mix/setup/webpack.mix.js ./

7

Khi bạn chạy tập lệnh xây dựng lần đầu tiên sau khi chỉnh sửa tệp này, Laravel Mix sẽ cài đặt tất cả các phụ thuộc cần thiết cho tiện ích mở rộng và bạn sẽ cần chạy lại tập lệnh xây dựng. Đây chỉ là một điều một lần. Tài nguyên sẽ được sao chép từ

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

8, được tối ưu hóa và đưa vào

let mix = require['laravel-mix'];

mix.setPublicPath['./dist'];

mix
  .js['assets/scripts/main.js', 'scripts']
  .sass['assets/styles/main.scss', 'styles'];

9

triển khai

Đây là một sai lầm lớn của nhiều người chỉ mới chạm tay vào trình quản lý gói. Họ tải toàn bộ thư mục

let mix = require['laravel-mix']; 

mix.setPublicPath['./dist'];

mix
 .js['assets/scripts/main.js', 'dist/scripts']
 .js['assets/scripts/inner-page.js', 'dist/scripts']
 .sass['assets/styles/main.scss', 'dist/styles'];

3 của lỗ đen lên lưu trữ web. [Thậm chí không đề cập đến tải lên FTP. ]

Bây giờ bạn có các nội dung được biên dịch trong thư mục

// for npm users
$ npm build -- --watch

// for Yarn users
$ yarn build --watch

2. Bạn chỉ có thể tải thư mục này lên dịch vụ lưu trữ web và chỉ để lại

let mix = require['laravel-mix']; 

mix.setPublicPath['./dist'];

mix
 .js['assets/scripts/main.js', 'dist/scripts']
 .js['assets/scripts/inner-page.js', 'dist/scripts']
 .sass['assets/styles/main.scss', 'dist/styles'];

3 Cư trú tại chỗ trên sự phát triển cục bộ của bạn, cũng như thư mục

let mix = require['laravel-mix']; 

mix.setPublicPath['./dist'];

mix
 .js['assets/scripts/main.js', 'dist/scripts']
 .js['assets/scripts/inner-page.js', 'dist/scripts']
 .sass['assets/styles/main.scss', 'dist/styles'];

6

Và đó là tất cả. Mã hóa vui vẻ

*Mọi quan điểm hoặc ý kiến ​​​​trong bài viết này là cá nhân và thuộc về [các] tác giả và không đại diện cho quan điểm chính thức của Fresh Consulting hoặc khách hàng của nó

Jirayu Yingthawornsuk

Nhà phát triển WordPress

Jay bằng cách nào đó đã huấn luyện những con mèo của anh ấy để giúp anh ấy viết mã. Một nguồn tin bí ẩn cho biết clowder đã hoàn thành hơn 99% tác phẩm của mình. Thật là một phép lạ

Làm cách nào để liên kết tệp CSS và js trong Laravel?

Làm cách nào để gọi CSS từ tài nguyên trong laravel?

Laravel Mix hoạt động như thế nào?